我试图在整个网站上创建一次性加载popup div

时间:2017-05-31 06:47:45

标签: javascript jquery

这是弹出式div,它运行良好。但是每次刷新浏览器和我想要的东西后它都会加载?当用户打开我的网站时,我只需要这一次。

知道如何控制它。仅供参考,这是magento-2 popup。

require(
  [
    'jquery',
    'Magento_Ui/js/modal/modal'
  ],
  function(
    $,
    modal
  ) {
    var options = {
      type: 'popup',
      responsive: true,
      innerScroll: true,
      //title: 'popup modal title',
      buttons: [{
        text: $.mage.__('Continue'),
        class: '',
        click: function() {
          this.closeModal();
        }
      }]
    };

    var popup = modal(options, $('#popup-modal'));

    $('#popup-modal').modal('openModal');
  }
);

$(document).ready(function() {
  $(".actions").click(function() {
    alert("The paragraph was clicked.");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup-modal">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <h1>Subscribe for Our <span>exclusive offer</span></h1>
  <p>Be the first to know about new arrivals exclusive offers and promotions</p>
  <?php echo $block->getLayout()->createBlock('Magento\Newsletter\Block\Subscribe')->setTemplate('subscribe.phtml')->toHtml();?>
</div>

2 个答案:

答案 0 :(得分:0)

由于普通的JavaScript(实际上NodeJS工作在服务器端)只处理客户端操作(即您的浏览器),因此它不能记住&#34;页面重新加载后弹出窗口显示一次。 JavaScript需要一些帮助。关键是你不需要那么关心JavaScript部分,但在这种情况下更多地关注PHP。

1:您可以将此信息保存在cookie中,如果弹出窗口显示一次,可以保存信息。唯一的缺点是,当您清除浏览器cookie时,弹出窗口会再次出现。

2:您可以使用MySQL数据库永久存储此信息。因此,您需要自己的自定义模块。在搜索中可以找到很好的例子。

我建议您创建自己的模块,并为具有您信息的客户扩展数据库表。

希望这有助于您朝着正确的方向前进。

答案 1 :(得分:0)

添加cookie有一些与CREATE,READ和REMOVE cookie相关的功能请查看此fiddle或以下代码段以获取更多信息。

我希望它会帮助你

function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            var expires = "; expires=" + date.toUTCString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

   $(function(){
 
      if(readCookie('OnlyONCE') == null)
      {
        $('#popup-modal').modal('openModal');
        createCookie('OnlyONCE','true',7);
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cookie" style="display:none;">POP UP
    <a href="#" class="cookie-close">
    <span class="icon" onclick='onClose()'>X</span>
    </a>
</div>