javascript - 我只需要使用 onload 函数显示一次 jquery 弹出窗口

标签 javascript jquery html function

我只需要使用 onload 函数显示一次 jquery 弹出窗口。这是我的弹出窗口,带有 window.onload 函数延迟,并且 addclass 是可见的,但是我希望添加一个 cookie 函数,以便每个浏览器或缓存仅加载一次弹出窗口。

任何建议都会很棒! - 代码中的 J 查询和 html

    jQuery(document).ready(function($){

  window.onload = function (){
    jQuery(".bts-popup").delay(1000).addClass('is-visible');
    }

    //open popup
    jQuery('.bts-popup-trigger').on('click', function(event){
        event.preventDefault();
        jQuery('.bts-popup').addClass('is-visible');
    });

    //close popup
    jQuery('.bts-popup').on('click', function(event){
        if( jQuery(event.target).is('.bts-popup-close') || jQuery(event.target).is('.bts-popup') ) {
            event.preventDefault();
            jQuery(this).removeClass('is-visible');
        }
    });
    //close popup when clicking the esc keyboard button
    jQuery(document).keyup(function(event){
        if(event.which=='27'){
            jQuery('.bts-popup').removeClass('is-visible');
        }
    });
});
   

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="bts-popup" role="alert">
        <div class="bts-popup-container">
            <div id="contact-form">
                    <form method="post" action="">
                        <input type="hidden" name="form_uid" value="e880e632-8e7c-4b51-8928-b63cd1b6cdb5">
                        <ul>
                            <li class="namefield">
                                <input name="name" type="text" class="name" placeholder="Your Name">
                            </li>
                            <li class="emailfield">
                                <input name="submit_by" type="text" class="email-contact" placeholder="Your Email">
                            </li>
                            <li class="telfield">
                                <input name="telephone" type="text" class="phone" placeholder="Contact Number">
                            </li>
                            <li class="commentsfield">
                                <textarea name="comments" class="query" placeholder="How Can We Help?"></textarea>
                            </li>
                            <li>

                            </li>

                            <li> 
                                <input name="submit-button" type="submit" value="Submit" class="submit">
                                <p class="gdpr-small">*By clicking ‘submit’ you are consenting to us replying, and storing your details. (see our <a href="">privacy policy</a>).</p>
                            </li>
                        </ul>
                        <input type="hidden" name="required" value="name,submit_by,telephone,comments">
                        <input type="hidden" name="data_order" value="name,submit_by,telephone,comments,marketing-opt-in">
                        <input type="HIDDEN" name="automessage" value="mymessage">
                        <input name="ok_url" type="hidden" value="">
                        <input name="not_ok_url" type="hidden" value="">
                    </form>
                </div>
            <a href="#0" class="bts-popup-close"><i class="fa fa-times-circle"></i></a>
        </div>
    </div>

最佳答案

如何简单管理cookie,我想你可以在这里观看:link

我认为这非常简单(伪代码):

if (getCookie("popup") doesnt exist OR is set to 0)
  showPopup();
  setCookie("popup",1);
else
  destroyPopup();
endif

您也可以使用这种简单的方法来处理多个弹出窗口。

如果您使用PHP,则可以使用$_COOKIE而不是 JavaScript 函数。

希望有帮助。

关于javascript - 我只需要使用 onload 函数显示一次 jquery 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51085157/

相关文章:

javascript - 使用复选框从表中选择时添加两次数据

javascript - Jquery:如何在没有有效 href 的情况下打开 window.open()?

javascript - 使用轮播滑动图像

html - Crossslide 的分页?

javascript - 如何使用react-calendar动态渲染列表?

javascript - Observable 不发出新值

javascript - 立即调用的动画回调函数

javascript - 简单的 Javascript 测试未执行

javascript - 在pdfmake中制作子列(一组具有相同标题的列)

javascript - 当父函数被触发时不退出第一个按键事件