如何在彈出窗口中使用「使用條款」

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。