JavaScript弹出只显示一次
JavaScript popup to show only once
这是一个脚本的弹出淡出框显示当用户想要离开网页。
我试图使它只显示一次,所以当用户单击"X标记"退出时,我不想再次显示它。目前它总是显示,无论你有多少次点击退出。
将感谢任何帮助,因为我在javascript的知识非常有限。
javascript$(document).ready(function() {
$(document).mousemove(function(e) {
$('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
$('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));
if(e.clientY <= 30)
{
// Show the exit popup
$('#exitpopup_bg').fadeIn();
$('#exitpopup').fadeIn();
}
});
$('#xmark').click(function(){
$('#exitpopup_bg').fadeOut();
$('#exitpopup').slideUp();
});
});
. css
#exitpopup {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
#exitpopup h1 {
margin-top:0px;
padding-top:0px;
font-size:55px;
}
#exitpopup h2 {
margin-top:0px;
padding-top:0px;
font-size:35px;
text-transform:uppercase;
color: #ff5300;
font-weight:bold;
font-style:italic;
}
#exitpopup p {
text-align:left;
}
.button-popup {
background-color: #ff5300;
padding:40px;
color:#fff;
border:0px;
font-size:26px;
font-weight:bold;
}
.input-popup {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0, 0, 0, 0.1),
0 0 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0, 0, 0, 0.1),
0 0 16px rgba(0, 0, 0, 0.1);
box-shadow:
inset 0 0 8px rgba(0, 0, 0, 0.1),
0 0 16px rgba(0, 0, 0, 0.1);
padding: 15px;
background: #FFE2C6;
margin: 0 0 10px 0;
font-weight: bold;
font-size:16px;
}
#xmark {
position:absolute;
margin-left:-20px;
margin-top:-40px;
}
html <div style="display: none; width:100%; height:100%; position:fixed; background:#000000; opacity: .9; filter:alpha(opacity=0.8); z-index:999998; margin-top:-15px;" id="exitpopup_bg"></div>
<div style=" margin-left: -20px; width:1000px; height:550px; display:none; position:fixed; color:#000; padding:40px 20px 20px 20px; z- index:999999; background:rgb(20, 20, 20); background: #f7f7f7; " id="exitpopup">
<div id="xmark"><img src="../slike/x-mark.png" /></div>
</div>
您可以保留一个变量作为是否打开弹出窗口的标志。当页面刷新时,它会被设回false。
$(document).ready(function() {
var opened = false;
$(document).mousemove(function(e) {
$('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
$('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));
if(e.clientY <= 30 && !opened)
{
opened = true;
// Show the exit popup
$('#exitpopup_bg').fadeIn();
$('#exitpopup').fadeIn();
}
});
$('#xmark').click(function(){
$('#exitpopup_bg').fadeOut();
$('#exitpopup').slideUp();
});
});
您可以添加一个计数器变量。像这样:
$(document).ready(function() {
var counter=0;
....
if(counter ==0) {
// Show the exit popup
$('#exitpopup_bg').fadeIn();
$('#exitpopup').fadeIn();
counter++;
}
}
});
使用.remove()
回调.slideup()
:
$('#exitpopup').slideUp('fast', function(){
$(this).remove();
});
相关文章:
- 一次显示一个隐藏指令-AngularJS
- 一次显示一个指令AngularJS
- Slding表单不会一次显示一个表单
- 一次显示/隐藏一个Javascript
- 一次显示一个标记-谷歌地图API v3
- 一次显示n个列表元素,jQuery
- 想要在fullcalendar插件的周视图中一次显示3天
- 用JavaScript制作战斗模拟器,无法一次显示整个模拟
- 尝试连续一次显示多个 php 文件
- 如何使用 javascript 一次显示此数组的字符串内容
- 如何保持一次显示一个悬停
- 引导轮播不起作用(一次显示所有图像)
- 在一个页面上一次显示所有“标题”工具提示
- 如何设置仅一次显示通知栏的cookie
- 从上到下的可见图像堆积:有没有办法一次显示
- 枚举内容滑块一次显示两个图像
- 使用 JS 随机化表行,同时一次显示一个表行
- 寻找一个JS滑块插件,它支持一次显示多张幻灯片,以及不同宽度的幻灯片
- 选择项目并一次显示n篇文章
- 一次显示一个DOM元素的淡入/淡出列表