每次会话只显示一次弹出窗口

Show popup only once per session

本文关键字：一次 窗口 会话 显示      更新时间：2023-09-26

这是我当前的代码。我如何才能显示每次会话只有一次弹出?这是magento结帐页面上的一个弹出图片，主要是推广一个附加产品

<!-- Trigger/Open The Modal -->
<style><!--
.button {
  display:none!important;
--></style>
<div class="button"><button id="myBtn">.</button></div>
<!-- The Modal -->
<p>&nbsp;</p>
<style><!--
@media (max-width: 979px) {  
.modal {
    display:none!important;
}
}
--></style>
<div id="myModal" class="modal"><!-- Modal content -->
<div class="modal-content"><img id="Image-Maps-Com-image-maps-2016-09-01-150341" alt="" src="http://www.prowrestlingtees.com/images/checkoutpopup.png" height="312" width="432" usemap="#image-maps-2016-09-01-150341" /> <map id="ImageMapsCom-image-maps-2016-09-01-150341" name="image-maps-2016-09-01-150341"> 
<area style="outline: none;" title="" shape="rect" coords="0,249,208,306" href="http://www.prowrestlingtees.com/pwcrate-collectible.html" alt="" target="_self" />
 <span class="close"> 
<area style="outline: none;" title="" shape="rect" coords="222,252,429,307" alt="" target="_self" />
 </span> 
<area style="outline: none;" title="Image Map" shape="rect" coords="430,310,432,312" href="http://www.image-maps.com/index.php?aff=mapped_users_0" alt="Image Map" />
 </map></div>
</div>
<style><!--
/* The Modal (background) */
.modal {
    display: inline; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
    margin: 15% auto; /* 15% from the top and centered */
    text-align: center;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
--></style>
<script type="text/javascript">// <![CDATA[
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
// ]]></script>

如何使这个工作?感谢您的帮助

您必须在处理弹出窗口的函数中设置会话。试试这样:

$.session.set("shown", "true");

第二步是为函数内的所有内容设置if子句。(上面的代码片段必须在其中)。if-子句可以像这样:

if($.session.get("myVar") == "false") {
}

应该是这样的

if($.session.get("myVar") == "false") {
    $.session.set("shown", "true"); // set it to true
    var id = '#dialog';
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    //transition effect     
    $('#mask').fadeIn(1000);    
    $('#mask').fadeTo("slow",0.8);  
    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    //transition effect
    $(id).fadeIn(2000);   
}

你必须使用这个插件:

插件

相关文章：