Как использовать «Срок использования» в Popup

Question

Я хочу настроить term of use во всплывающем окне, когда пользователь впервые войдет в эту страницу во всплывающем окне.

Answer 1

Ответ здесь, нам нужно подключить после входа в действие для

https://web.liferay.com/community/forums/-/message_boards/message/76286279

Answer 2

Чтобы установить условия использования, вам нужно будет сделать 2 вещи.

Сначала вам нужно создать статью о веб-контенте.

1. Перейдите на панель управления.
2. Выберите «Веб-контент».
3. Затем Добавить> «Основной контент».
4. Укажите желаемые условия использования.
5. Запишите идентификатор и идентификатор группы, который вы создали.

Примечание: идентификатор доступен, когда вы просматриваете страницу контента, но идентификатор группы менее очевиден. Чтобы найти идентификатор группы, просмотрите URL-адрес и найдите параметр doAsGroupId. Его значение - это идентификатор группы, для которого вы создали статью.

Во-вторых, вам необходимо настроить свой портал для загрузки этой статьи в веб-контенте.

1. Из файловой системы перейдите на страницу установки Liferay Portal.
2. Оттуда найдите файл portal.properties. Если вы используете Tomcat, он будет расположен в webapps\ROOT\WEB-INF\classes.
3. Здесь добавьте файл с именем portlet-ext.properties, если он еще не существует.

4. Добавьте следующие ключи со значениями, которые вы ранее записали.

   terms.of.use.journal.article.group.id= 
   terms.of.use.journal.article.id= 
   

Перезапустите сервер и портал теперь должен отобразить Условия использования формируют Web Content статью.

Answer 3

Вы можете использовать модальное диалоговое окно в бутстрапе, через которое вы можете достичь того, чего хотите.

$(window).load(function() 
{ 
$('#newModal').modal('show'); 
}); 

Не забудьте добавить этот импорт таблиц стилей в свой html-файл.

<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Ваш HTML файл должен иметь следующий код

<div class="container"> 
<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <!Your Heading--> 
    </div> 
    <div class="modal-body"> 
     <p>Your text in the modal.</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">I Agree</button> 
    </div> 

Answer 4

Просто зайдите

How to generate a simple popup using jQuery

или

https://jqueryui.com/dialog/

Для вашего решения

Или

STYLESHEET

a.selected { 
    background-color:#1F75CC; 
    color:white; 
    z-index:100; 
} 

.messagepop { 
    background-color:#FFFFFF; 
    border:1px solid #999999; 
    cursor:default; 
    display:none; 
    margin-top: 15px; 
    position:absolute; 
    text-align:left; 
    width:394px; 
    z-index:50; 
    padding: 25px 25px 20px; 
} 

label { 
    display: block; 
    margin-bottom: 3px; 
    padding-left: 15px; 
    text-indent: -15px; 
} 

.messagepop p, .messagepop.div { 
    border-bottom: 1px solid #EFEFEF; 
    margin: 8px 0; 
    padding-bottom: 8px; 
} 

JAVASCRIPT

function deselect(e) { 
     $('.pop').slideFadeToggle(function() { 
     e.removeClass('selected'); 
     });  
    } 

$(function() { 
    $('#contact').on('click', function() { 
    if($(this).hasClass('selected')) { 
     deselect($(this));    
    } else { 
     $(this).addClass('selected'); 
     $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#contact')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
}; 

HTML

<div class="messagepop pop"> 
    <form method="post" id="new_message" action="/messages"> 
     <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p> 
     <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p> 
     <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p> 
    </form> 
</div> 

Answer 5

Использование начальной загрузки модальный ш Ith Javascript для всплывающего

JavaScript код: (написать этот код внутри тег сценария)

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
}) 

HTML код: (убедитесь, что Javascript код и HTML код должен быть в том же)

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... **(Write your content here)** 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Вы можете использовать ссылки вместо кнопки.

Обязательно добавьте роли = "диалог" и ария-labelledby = "...", ссылающийся модальное название, к .modal и роли = «документ». типовой диалог сам.

Кроме того, вы можете дать описание вашего модального диалога с арии-describedby на .modal.