个人中心
gpt4 book ai didi

javascript - 注册模态限制

转载 作者：行者123 更新时间：2023-12-03 00:03:51 25 4
gpt4 key购买 nike

我在引导网站上集成了一个注册模式，并希望限制访问者在每个 session 中看到它两次的展示次数，而不是在每个页面上看到它，并且在访问者订阅后隐藏它。该模式会在打开网页 5 秒后出现，并且仅在用户单击关闭按钮后关闭。

//Modal
$(document).ready(function () {
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(5000).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(6000).fadeIn(400);
//Hide dialogue and background when the user clicks the close button
$("#btnClose").click(function (e) {
    HideDialog();
    e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog() {
    $("#bkgOverlay").fadeOut(400);
    $("#delayedPopup").fadeOut(300);
}
html {
    background-color: #333;
}

h2 {
  text-align: center;
}

/****Modal*****/
/*Default Modal Styles*/
/*   This is the background overlay   */
.backgroundOverlay {
	position: fixed;
	top: 0;
	right: 0,
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000000;
	opacity: .85;
	filter: alpha(opacity=85);
	-moz-opacity: .85;
	z-index: 101;
	display: none;
}
/*   This is the Popup Window   */
.delayedPopupWindow {
	display: none;
	position: fixed;
	width: auto;
	max-width: 480px;
	height: 310px;
	top: 50%;
	left: 50%;
	margin-left: -260px;
	margin-top: -180px;
	background-color: #efefef;
	border: 2px solid #333;
	z-index: 102;
	padding: 10px 20px;
}
/*   This is the closing button  */
#btnClose {
	width:100%;
	display: block;
	text-align: right;
	text-decoration: none;
	color: #BCBCBC;
}
/*   This is the closing button hover state  */
#btnClose:hover {
	color: #c90c12;
}
/*   This is the description headline and paragraph for the form   */
#delayedPopup > div.formDescription {
	float: left;
	display: block;
	width: 44%;
	padding: 1% 3%;
	font-size: 18px;
	color: #666;
	clear: left;
}
/*   This is the styling for the form's headline   */
#delayedPopup > div.formDescription h2 {
	color: #444444;
	font-size: 36px;
	line-height: 40px;
}

/*MailChimp Signup Form*/

/*   This is the signup form body  */
#delayedPopup #mc_embed_signup {
	float: left;
	width: 47%;
	padding: 1%;
	display: block;
	font-size: 16px;
	color: #666;
	margin-left: 1%;
}
/*   This is the styling for the signup form inputs  */
#delayedPopup #mc-embedded-subscribe-form input {
	width: 95%;
	height: 30px;
	font-size: 18px;
	padding: 3px;
  margin-bottom: 5px;
}
/*   This is the styling for the signup form inputs when they are being hovered with the mouse  */
#delayedPopup #mc-embedded-subscribe-form input:hover {
	border:solid 2px #97c1c0;
	box-shadow: 0 1px 3px #AAAAAA;
}
/*   This is the styling for the signup form inputs when they are focused  */
#delayedPopup #mc-embedded-subscribe-form input:focus {
	border:solid 2px #333;
	box-shadow: none;
}
/*   This is the styling for the signup form submit button  */
#delayedPopup #mc-embedded-subscribe {
	width: 100%!important;
	height: 40px!important;
	margin: 10px auto 0 auto;
	background: #333;
	border: none;
	color: #fff;
}
/*   This is the styling for the signup form submit button hover state  */
#delayedPopup #mc-embedded-subscribe:hover {
	background: #97c1c0;
	color: #fff;
	box-shadow:none!important;
	cursor: pointer;
}

.delayedPopupWindow {
    display: none;
    position: fixed;
    width: auto;
    max-width: 480px;
    height: 310px;
    top: 50%;
    left: 50%;
    margin-left: -260px;
    margin-top: -180px;
    background-color: #efefef;
    border: 2px solid #333;
    z-index: 102;
    padding: 10px 20px;
}
<html lang="en">
<head>
  <title>HOME</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  
<body>
  <h2>This a demo page</h2>
<!---Sign Up Modal---->
  <div id="bkgOverlay" class="backgroundOverlay" style="display: block;"></div>
  <div id="delayedPopup" class="delayedPopupWindow" style="display: block;">
    <!-- This is the close button -->
    <a href="#" id="btnClose" title="Click here to close this deal box.">[ X ]</a>
    <!-- This is the left side of the popup for the description -->
    <div class="formDescription">
      <h2>Sign Up and <span style="color: #333; font-weight: bold;">Save!</span></h2>
      <p>Sign up today and be the first to know about our SPECIALS!</p>
    </div>
    <!-- Begin MailChimp Signup Form -->
    <div id="mc_embed_signup">
      <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
        <div class="mc-field-group">
          <label for="mce-FNAME">First Name
            <span class="asterisk">*</span>
          </label>
          <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
        </div>
        <div class="mc-field-group">
          <label for="mce-LNAME">Last Name
            <span class="asterisk">*</span>
          </label>
          <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
        </div>
        <div class="mc-field-group">
          <label for="mce-EMAIL">Email Address
            <span class="asterisk">*</span>
          </label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
        </div>

        <div id="mce-responses" class="clear">
          <div class="response" id="mce-error-response" style="display:none"></div>
          <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="PLEASE INPUT THE MAILCHIMP CODE" value="">
        </div>
        <div class="clear">
          <input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
      </form>
    </div>
    <!-- End MailChimp Signup Form -->
  </div> <!---End of Sign Up Modal-->

    <!------JS----->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </body>
</html>

最佳答案

使用jquery-cookie carhartl 的插件。

在显示模式之前检查 cookie。如果存在，请勿显示它。如果不是，则存储一个新的 cookie 并显示模式。

$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
    $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
    $('#bkgOverlay').modal('show');
}

});

关于javascript - 注册模态限制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55061796/

25 4 0
文章推荐： javascript - 如何使用 Redux 获取另一个组件的本地状态
文章推荐： javascript - 如何使用 Ckeditor 保存带有 div 和 html 属性的 HTML
文章推荐： javascript - 在以 POST(而不是 GET)方式发送请求后，如何将对象作为 html 页面插入到来自后端的 html 元素中？
文章推荐： javascript - 如何扩展 AdonisJS Response 类？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com