如何在首次访问时弹出模态窗口

时间:2017-05-19 13:29:54

标签: javascript jquery html css

当您访问某个页面时,我会弹出一个模态窗口。访客必须选择我同意或不同意。我需要一个漂亮的小jquery脚本,它会记住之前访问过该页面的人并同意这样,每次访问该页面时都不会弹出模态。

有人可以推荐使用好的脚本吗?这是代码:

<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-header">
         <p style="text-align:center">
Lorem ipsum dolor sit amet <br />
tollit insolens abhorreant no sed<br />
<strong>Et alia cetero</strong>
</p>

<h3>IMPORTANT</h3>
<p>
Lorem ipsum dolor sit amet, idque persecuti elaboraret pro at. Qui dicat 
dicit nostrud ex, vix id debet detraxit. Eam nostrud probatus dissentias 
ne, ollit insolens abhorreant no sed. Ius cibo denique ea. Et alia cetero 
efficiantur mel, vix facer sententiae no.
</p>

<p>
Lorem ipsum dolor sit amet, idque persecuti elaboraret pro at. Qui dicat 
dicit nostrud ex, vix id debet detraxit:
</p>

<p>
Lorem ipsum dolor sit amet, idque persecuti elaboraret pro at. Qui dicat 
dicit nostrud ex, vix id debet detraxit. Eam nostrud probatus dissentias ne, 
tollit insolens abhorreant no sed. Ius cibo denique ea. Et alia cetero 
efficiantur mel, vix facer sententiae no.
</p>

<p>

</p>


    </div>
    <div class="modal-body">
        <p>

</p>
    </div>
    <div class="modal-footer"> 
    <a href="#modal-one" class="btn1">Agree</a>
    <a href="#modal-one" class="btn1">Disagree</a>


    </div>
</div>
</div>
<div class="wrap"></div>

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:4)

首次访问工厂cookielocal storage用户浏览器中的值,并在每次访问时检查cookielocal storage值是否存在,然后不显示模态/弹出窗口。

本地存储ex:

localStorage.setItem(key, value);  // set
localStorage.getItem(key);         // get

答案 1 :(得分:2)

您可以通过以下方式将项目设置到本地存储中:

localStorage.setItem(key, value);

阅读很简单:

localStorage.getItem(key);

现在为您“首次访问”grep一个关键字,然后询问本地存储:)保持用户可以清除他的本地存储。