关闭弹出窗口,然后在30分钟后打开

时间:2015-10-26 08:31:04

标签: jquery html css cookies popup

这是 html css js 。我想在弹出窗口打开并关闭弹出窗口然后在 30分钟后打开。我不知道为什么我没有设置这个弹出窗口或丢失一些东西。请指导我。 我已经从http://www.jqueryscript.net/lightbox/jQuery-Plugin-To-Show-A-Popup-Only-Once-Per-Visitor-First-Visit-Popup.html下载了弹出脚本

jquery.firstVisitPopup.js

(function ($) {

    'use strict';

    $.fn.firstVisitPopup = function (settings) {

        var $body = $('body');
        var $dialog = $(this);
        var $blackout;
        var setCookie = function (name, value) {
            var date = new Date(),
                expires = 'expires=';
            date.setTime(date.getTime() + (60*30000);
            expires += date.toGMTString();
            document.cookie = name + '=' + value + '; ' + expires + '; path=/';


        }

        var getCookie = function (name) {
            var allCookies = document.cookie.split(';'),
                cookieCounter = 0,
                currentCookie = '';
            for (cookieCounter = 0; cookieCounter < allCookies.length; cookieCounter++) {
                currentCookie = allCookies[cookieCounter];
                while (currentCookie.charAt(0) === ' ') {
                    currentCookie = currentCookie.substring(1, currentCookie.length);
                }
                if (currentCookie.indexOf(name + '=') === 0) {
                    return currentCookie.substring(name.length + 1, currentCookie.length);
                }
            }
            return false;
        }
        var showMessage = function () {
            $blackout.show();
            $dialog.show();

        }

        var hideMessage = function () {
            $blackout.hide();
            $dialog.hide();
            setCookie('fvpp' + settings.cookieName, 'true');
            $('#fvpp-close').click(function() {
            $('#my-welcome-message').hide();
            $limit = 9999;
        });     

        }

        $body.append('<div id="fvpp-blackout"></div>');
        $dialog.append('<a id="fvpp-close">&#10006;</a>');
        $blackout = $('#fvpp-blackout');

setTimeout(function(){


        if (getCookie('homepage' + settings.cookieName)) {
            hideMessage();


        } else {

            showMessage();

        }
 },5000);


        $body.on('click', '#fvpp-close', hideMessage);


    };

})(jQuery);

CSS

<style>
    body { margin-top: 0; }

#container {
  max-width: 1000px;
  margin: 0 auto;
  background: #EEE;
}

h1,
p { padding: 1em 1em; }

#fvpp-blackout {
  display: none;
  z-index: 499;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

#my-welcome-message {
  display: none;
  z-index: 500;
  position: fixed;
  width: 36%;
  left: 30%;
  top: 20%;
  padding: 20px 2%;
  font-family: Calibri, Arial, sans-serif;
  background: #FFF;
}

#fvpp-close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

#fvpp-dialog h2 {
  font-size: 2em;
  margin: 0;
}

#fvpp-dialog p { margin: 0; }
</style>

HTML

<div id="container">
          <h1>jQuery First Visit Popup Demo</h1>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum quam sed sapien adipiscing quis vehicula ante placerat. Nulla id magna nisl, ac luctus metus. Nunc sagittis, libero interdum volutpat porttitor, enim ligula fringilla tortor, vel scelerisque dolor orci ac erat. Aliquam et urna risus. Vivamus justo justo, sagittis ac egestas pellentesque, lobortis at dui. Phasellus faucibus commodo ante id eleifend. Sed ullamcorper suscipit malesuada. Phasellus feugiat diam eget ligula tempus suscipit eu at tortor. Fusce egestas aliquam quam nec bibendum. Ut lobortis, urna non lobortis pellentesque, ipsum nisl fermentum augue, eu iaculis felis sem eget erat. Suspendisse potenti. Fusce vel quam nunc. Fusce neque massa, venenatis non porttitor non, viverra eget lorem. Aliquam erat volutpat. Sed at lobortis nisi. Pellentesque sagittis eros malesuada nisi commodo eu tincidunt eros lobortis.</p>


        </div>
<div id="my-welcome-message">
          <h2>Welcome to my site</h2>
          <p>Hello, welcome to my website.</p>
        </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="jquery.firstVisitPopup.js"></script> 
<script>
            $(function () {
                $('#my-welcome-message').firstVisitPopup({
                    cookieName : 'homepage'
            });

            });
        </script>

0 个答案:

没有答案