0
我在网页上登录3秒后弹出一个网站（我知道他们很烦人，但我的客户坚持！），我有这种模式弹出（从topModal）。第一次访问后停止模式弹出
有没有办法让我可以拥有它，所以它只在第一次访问后弹出？ ...如果用户返回主页，则不会再次弹出。如果是这样，请有人请解释这是如何做到的（我还在学习）？
;(function($, window, document, undefined) {
'use strict';
var pluginName = 'topmodal',
defaults = {
topmodal: '.js-topmodal',
topmodalBtn: '.js-topmodal-btn',
topmodalBtnClose: '.js-topmodal-btn-close',
topmodalContainer: '.js-topmodal-container',
topmodalOverlay: '.js-topmodal-overlay'
};
function Plugin (element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend(Plugin.prototype, {
init: function() {
var _obj = this.settings;
Plugin.prototype.handlerMethods(_obj);
},
handlerMethods: function(_obj) {
setTimeout(function() {
Plugin.prototype.show(_obj);
Plugin.prototype.showContainer(_obj);
Plugin.prototype.showOverlay(_obj);
}, 3000); //set time here now 3 seconds
$(document).on('click', _obj.topmodalBtn, function() {
Plugin.prototype.show(_obj);
Plugin.prototype.showContainer(_obj);
Plugin.prototype.showOverlay(_obj);
});
$(document).on('click', _obj.topmodalBtnClose, function() {
Plugin.prototype.hide(_obj);
Plugin.prototype.hideContainer(_obj);
Plugin.prototype.hideOverlay(_obj);
});
$(document).on('click', _obj.topmodalContainer, function() {
Plugin.prototype.hide(_obj);
Plugin.prototype.hideContainer(_obj);
Plugin.prototype.hideOverlay(_obj);
});
$(document).on('click', _obj.topmodal, function(event) {
event.stopPropagation();
});
},
show: function(_obj) {
$(_obj.topmodal).addClass('is-open');
},
hide: function(_obj) {
$(_obj.topmodal).removeClass('is-open');
},
showContainer: function(_obj) {
$(_obj.topmodalContainer).addClass('is-open');
},
hideContainer: function(_obj) {
$(_obj.topmodalContainer).removeClass('is-open');
},
showOverlay: function(_obj) {
$(_obj.topmodalOverlay).addClass('is-open');
},
hideOverlay: function(_obj) {
$(_obj.topmodalOverlay).removeClass('is-open');
}
});
$.fn[ pluginName ] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" +
pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);.topmodal {
background: #1d1c1b;
box-sizing: border-box;
display: none;
position: relative;
padding: 20px;
max-width: 500px;
width: 100%;
vertical-align: middle;
z-index: 10000;
border: 3px solid #7A7A7A;
border-radius: 10px;
}
.topmodal.is-open {
display: inline-block;
}
.topmodal-overlay {
background: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
cursor: pointer;
}
.topmodal-overlay.is-open {
display: block;
z-index: 9999;
}
.topmodal-container {
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
display: none;
text-align: center !important;
overflow: auto;
padding: 10px 10px 0;
}
.topmodal-container.is-open {
display: block;
}
.topmodal-container:after {
content: '';
display: inline-block;
margin-left: -.05em;
height: 100%;
vertical-align: middle;
}
input.button_popup_sub {
display: block;
text-decoration:none;
padding:12px 20px;
background-color:#006bb6;
color:#1d1c1b;
margin:10px auto 0px auto;
font-size:1em;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-appearance:none;
border:0;
cursor:pointer;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:bold;
width: 100%;
border-radius: 5px;
}
button.js-topmodal-btn-close {
display: block;
text-decoration:none;
padding:10px 20px;
background-color:#3E3E3E;
color:#1d1c1b;
margin:10px auto 0px auto;
font-size:.8em;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-appearance:none;
border:0;
cursor:pointer;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:bold;
width: 90%;
border-radius: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div class="topmodal-container js-topmodal-container">
<div class="topmodal js-topmodal" data-modal="a">
<div id="mc_embed_signup">
<form action="//sklz.us12.list-manage.com/subscribe/post?u=1c357725f18822f30cba9cbf2&id=3b6b7bd177" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label style="margin-bottom:20px;" for="mce-EMAIL">Join the Unicorn Australia mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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;" aria-hidden="true">
<input type="text" name="b_1c357725f18822f30cba9cbf2_3b6b7bd177" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button_popup_sub">
</div>
</div>
</form>
</div>
<button class="js-topmodal-btn-close">Close</button>
</div>
</div>
<div class="topmodal-overlay js-topmodal-overlay"></div>
<!--scripts-->
<script>
$(document).ready(function() {
$('.js-topmodal--log').topmodal({
topmodal: '.js-topmodal--log',
topmodalBtn: '.js-topmodal-btn--log',
topmodalBtnClose: '.js-topmodal-btn-closesss'
});
$('.js-topmodal--reg').topmodal({
topmodal: '.js-topmodal--reg',
topmodalBtn: '.js-topmodal-btn--reg'
});
$('.js-topmodal').topmodal();
});
</script>
</body>
</html>
查找['localStorage'（https://developer.mozilla.org/en/docs/Web/API/Window/localStorage）保持 “记忆” 它已经被访问。 –
...以及我将如何实现它到上面的代码（我没有写它）。 – DaveP19
看看[这里]（https://stackoverflow.com/a/16777653/2159528），只需用'visited'替换hidden。 ;） –