每个会话仅显示一次弹出窗口

Question

这是我当前的代码。如何在每个会话中仅显示一次弹出窗口？这是一个存在于 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>

无论如何要使这项工作？感谢您的帮助

Answer 1

您必须在处理弹出窗口的函数内设置一个会话。试试这样：

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

第二步是设置一个 if 子句来围绕函数内的所有内容。 （上面的 sn-p 必须在其中）。 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);   
} 

你必须使用这个插件：

Plugin