JS实现定时自动消失的弹出窗口
一、Demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js弹框3秒后自动消失</title>
<link rel="stylesheet" type="text/css" href="./js/bootstrap/css/bootstrap.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="./css/demo.css" rel="external nofollow" />
</head>
<body>
<button onclick="showModal()">点击弹出模态框</button>
<div class='modal my-modal-alert' id='my-modal-alert'>
<div class='modal-dialog boxBodySmall'>
<div class='modal-content'>
<div class='modal-header boxHeader'>
<button type='button' class='close boxClose' data-dismiss='modal'>
<span aria-hidden='true'>×</span><span class='sr-only'>Close</span>
</button>
<h4 class='modal-title boxTitle' id='modal-title'>模态框</h4>
</div>
<div class='modal-body' id='modal-body-alert'>
<div id='modal_message'>js弹框自动消失案例</div>
<span id='num'></span>
</div>
<div class='modal-footer boxFooter' id='modal-footer'>
<button type='button' class='btn btn-default boxButton' data-dismiss='modal'>关闭</button>
<button type='button' class='btn btn-primary boxButton'>保存</button>
</div>
</div>
</div>
</div>
<script src="./js/jquery/jquery-1.11.2.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/jquery-ui/jquery-ui.min.js"></script>
<script>
var clearFlag = 0;
var count = 3;//设置3秒后自动消失
var showModal = function(){
$("#my-modal-alert").toggle();//显示模态框
$("#my-modal-alert").draggable({//设置模态框可拖动（需要引入jquery-ui.min.js）
handle: ".modal-header"
});
clearFlag = self.setInterval("autoClose()",1000);//每过一秒调用一次autoClose方法
}
var autoClose = function(){
if(count>0){
$("#num").html(count + "秒后窗口将自动关闭");
count--;
}else if(count<=0){
window.clearInterval(clearFlag);
$("#num").html("");
$("#my-modal-alert").fadeOut("slow");
count = 3;
$("#my-modal-alert").toggle();
}
}
</script>
</body>
</html>
注意：1、bootstrap依赖于jquery,引入bootstrap前需要引入jquery
二、Demo.css
/*弹框本身(大)*/
.my-modal-alert .boxBodyBig{
width:496px;
height: 418px;
}
/*弹框本身(小)*/
.my-modal-alert .boxBodySmall{
width:412px;
height: 418px;
}
/*弹框头*/
.my-modal-alert .boxHeader{
background-color: #f6f6f6;
border-bottom: #e5e5e5 1px;
height: 48px;
}
/*弹框标题*/
.my-modal-alert .boxTitle{
background-color: #f6f6f6;
color:#333333;
font-family:"SimHei";
font-size: 16px;
}
/*弹框头部分右侧关闭按钮*/
.my-modal-alert .boxClose{
}
.my-modal-alert .boxClose:hover{
color: #ff7800;
}
/*弹框按钮的父级元素块*/
.my-modal-alert .boxFooter{
margin: auto;
text-align: center;
padding:24px 15px 24px 15px;
margin:0px 15px 0px 15px;
}
/*弹框按钮*/
.my-modal-alert .boxButton{
font-family:"SimHei";
background-color:#ff7800;
width: 70px;
height: 30px;
color:white;
text-align:center;
line-height: 1;
}
/*已下为选用*/
/*弹框主题label框*/
.my-modal-alert .boxLabel{
width:80px;
font-size: 14px;
font-family:'SimHei';
color: #999999;
}
/*文本框*/
.my-modal-alert .boxInput{
width:176px;
font-size: 14px;
color: #333333;
}
/*纯文本*/
.my-modal-alert .boxText{
color:#ff7800;
font-family:'SimHei';
font-size: 12px;
}
.my-modal-alert .boxTextarea{
font-size: 12px;
}
.my-modal-alert .modal-body{
width: 400px;
height: 100px;
text-align: center;
}
.my-modal-alert .modal_message{
margin-top: 20px;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现定时自动消失的弹出窗口
一.Demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js弹框3秒后自动消失</title> <link rel="stylesheet" type="text/css" href="./js/bootstrap/css/bootstrap.css" rel=&
-
JS+CSS实现带关闭按钮DIV弹出窗口的方法
本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> <script> function locking(){ document.all.ly.style.display="block"; document.all.ly.sty
-
javascript之弹出窗口居中的代码
function openWin(u, w, h) { var l = (screen.width - w) / 2; var t = (screen.height - h) / 2; var s = 'width=' + w + ', height=' + h + ', top=' + t + ', left=' + l; s += ', toolbar=no, scrollbars=no, menubar=no, location=no, resizable=no'; open(u, 'oW
-
JS弹出窗口代码大全(详细整理)
如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 复制代码 代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码 代码如下: <html&g
-
超详细的JS弹出窗口代码大全
如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 代码如下: <html> <bod
-
js弹出窗口返回值的简单实例
a.html: <form name="form1" method="post" action=""> <a href="javascript:void(null)" class="add" onClick="open('b.html','','resizable=1,scrollbars=1,status=no,toolbar=no,menu=no,width=500,heig
-
JS弹出窗口的运用与技巧大全
本文详细介绍了JS弹出窗口的运用,非常具有实用价值,具体一起来看一下把. //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write(&qu
-
js实现仿Discuz文本框弹出层效果
本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D
-
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
为了满足将网站加入到可信站点中,使用系统的控件,在弹出窗口的时候不用提示用户.可以通过下面的方法实现: 首先,了解一下可以设置的值和含义. 可信站点的注册表项目录 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Ranges\Range[*] ActiveX控件的注册表项目录 HKEY_CURRENT_USER\Software\Microsoft\Windows\Curr
-
基于JS实现点击图片在弹出层显示大图效果
Javascript是个好东西. Jquery是基于这个好东西的一个强大的库. 今天要实现的功能是基于这两个玩意儿的. 点击图片,在弹出层显示原图. 大概效果是这样的: 上代码: 先是html部分: <div style="text-align:center;margin-top:200px;"> <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt=&quo