How to use "Term of Use" in Popup

Question

I want to customize the term of use in popup, when a user login for first time that page should appear in popup.

Answer 1

To set the terms of use you will need to do 2 things.

First you'll need to create a Web Content Article.

1. Go to the Control Panel.
2. Select "Web Content".
3. Then Add > "Basic Content".
4. Enter in your desired Terms of Use language.
5. Write down the ID and the Group ID you've created the content.

Note: The ID is available when you're viewing the content's page but the group ID is less obvious. To find the group ID, look at the URL, and find the parameter doAsGroupId. Its value is the group ID you've created the article for.

Secondly, you'll need to configure your portal to load this Web Content article.

1. From the file system, navigate to your Liferay Portal installation.
2. From there find the portal.properties file. If you're using Tomcat, it will be located in webapps\ROOT\WEB-INF\classes.
3. Here add a file named portlet-ext.properties, if it does not already exist.

4. Add the following keys with the values you previously wrote down.

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

Restart your server and the portal should now display the Terms of Use form the Web Content article.

Answer 2

Use bootstrap modal with javascript for popup

JavaScript Code: (write this code inside script tag)

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

HTML Code: (make sure that Javascript Code and HTML Code should be in same tab)

<!-- 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>

you can use links in place of button.

Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself.

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

Answer 3

You can make use of modal dialog in bootstrap through which u can achieve what you want.

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

Don't forget to add this style sheets import in your html file.

<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>

Your html file should have the following code

<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

Simply go

How to generate a simple popup using jQuery

or

https://jqueryui.com/dialog/

For your solution

Or

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>