如何在 Popup 中使用 "Term of Use"

Question

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

Answer 1

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

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

转到控制面板。
Select "Web Content".
然后添加 > "Basic Content".
输入您想要的使用条款语言。
记下您创建内容的 ID 和组 ID。

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

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

从文件系统，导航到您的 Liferay Portal 安装。
从那里找到 portal.properties 文件。如果您使用 Tomcat，它将位于 webapps\ROOT\WEB-INF\classes.
这里添加一个名为 portlet-ext.properties 的文件，如果它不存在的话。

使用您之前记下的值添加以下键。

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

重新启动您的服务器，门户现在应该会显示 Web 内容文章中的使用条款。

Answer 2

您可以使用bootstrap中的模态对话框，通过它您可以实现您想要的。

$(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 3

直接去

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 4

将 bootstrap 模式与 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>

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

一定要加上role="dialog"和aria-labelledby="..."，引用模态标题，到 .modal，和 角色="document"到.modal-dialog本身。

此外，您可以在 .modal.

Answer 5

答案在这里，我们需要挂钩 post 登录操作

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

如何在 Popup 中使用 "Term of Use"

How to use "Term of Use" in Popup

liferay

liferay-6