如何在弹出窗口中使用“使用条款”

Question

我想在弹出窗口中自定义term of use，当用户首次登录时该页面应该出现在弹出窗口中。

Answer 1

答案就在这里，我们需要挂接为

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

Answer 2

要设置使用条款，您需要做2件事情。

首先，您需要创建一个Web内容文章。

1. 转到控制面板。
2. 选择“网页内容”。
3. 然后添加>“基本内容”。
4. 输入您想要的使用条款语言。
5. 记下您创建内容的ID和组ID。

注意：当您查看内容的页面时，该ID可用，但组ID不太明显。要查找组ID，请查看URL，并找到参数doAsGroupId。它的值是您为该文章创建的组ID。

其次，您需要配置门户以加载此Web内容文章。

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= 
   

重新启动服务器和门户网站现在应该显示本使用条款构成网站内容的文章。

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/

您的解决方案

或者

样式

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

使用引导模式w ^第i个的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> 

您可以使用链接代替按钮。

一定要添加角色= “对话框”和ARIA-labelledby = “...”，引用模式称号，.modal，并作用= “文件”到。模式对话框本身。

此外，您可以在.modal给你的模态对话框的描述与唱段，describedby。