jQuery 弹出窗口2秒后自动关闭
来源:互联网 发布:游族网络vip殿堂 编辑:程序博客网 时间:2024/05/17 12:05
修改数据后需要给用户一个提示,下面是html代码:
<!DOCTYPE HTML><html><head> <title>可设置内容弹出层,2秒自动消失</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/saveTip.js" type="text/javascript"></script><style type="text/css">.alertWindowContent h1,p{text-align: center;font-size: 18px;font-weight: bolder;}.alertWindowContent input{width: 100px; height: 50px;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}</style><script> $(function(){ $("#input1").click(function(){ jQuery.alertWindow("保存成功"); }); $("#input2").click(function(){ jQuery.alertWindow("修改成功"); }); });</script></head><body> <!-- 代码 开始 --><center><br><br><br><br><br><br><br><br><input type="button" value="按钮1" id="input1"><input type="button" value="按钮2" id="input2"></center></body></html>jQuery代码如下:
jQuery.extend({ alertWindow:function(e,n){var e=e,r;n===undefined?r="#00a8b7":r=n; if($("body").find(".alertWindow1").length===0){ var i='<div class="alertWindow1" style="width: 100%;height: 100%; background:rgba(0,0,0,0.5);position: fixed; left:0px; top: 0px; z-index: 9999;"><div style="width: 360px; height: 170px;background: #FFF;margin: 300px auto;border: 2px solid #CFCFCF;">'+'<div style="width: inherit;height: 20px;">'+'<div class="alertWindowCloseButton1" style="float: right; width: 10px; height: 30px;margin-right:5px;font-family:\'microsoft yahei\';color:'+r+';cursor: pointer;"></div>'+"</div>"+'<div id="successImg" class="alertWindowTitle" style="margin-top:10px;text-align:center;font-family:\'Verdana, Geneva, Arial, Helvetica, sans-serif\';font-size: 18px;font-weight: normal;color: '+r+';">'+"</div>"+'<div class="alertWindowContent" style="width:360px;height: 40px;text-align:center;font-size: 18px;color: #7F7F7F;margin-top:10px;">'+e+"</div>"+"</div>"+"</div>"; $("body").append(i); var s=$(".alertWindow1"); //2秒后自动关闭窗口 setTimeout(function(){s.hide()},1000); } else {$(".alertWindowContent").text(e),$(".alertWindow1").show(),setTimeout(function(){$(".alertWindow1").hide()},1000);} } })引入了一张图片,css样式如下:
#successImg{width: 58px;height: 58px;margin: 0px auto;background: url("../img/successIcon.png") no-repeat ;border:none;}整体效果如下图:
0 0
- jQuery 弹出窗口2秒后自动关闭
- jquery 弹出提示div 等待2秒自动关闭
- jquery 信息弹出后自动关闭
- 弹出窗口自动关闭
- jQuery实现点击弹出层3秒后自动消失
- 自动关闭网页提交后的弹出窗口
- 定时自动关闭弹出窗口
- 倒计时自动关闭弹出窗口
- 倒计时自动关闭弹出窗口
- winfrom弹出窗口用timer控件控制倒计时20秒后关闭
- 5秒后关闭的弹出框
- C# 对话框弹出后3秒关闭
- 弹出框显示2秒后,自动消失
- C# WinForm 鼠标不移动,20秒后,窗口自动关闭
- javascript弹出窗口后,关闭窗口时不弹出对话框
- JQuery点击弹出窗口外侧,关闭弹出窗口功能
- 自动弹出窗口,并定时关闭
- WPF弹出一个窗口,并自动关闭
- D3.js学习01_HELLOWORLD
- Spring MVC 中的异常处理 (handling exceptions)
- Kodi ——6 Controls (17) 6.17 Mover Control
- 内存的变量占用
- 删除全部指定的字符串
- jQuery 弹出窗口2秒后自动关闭
- guava Joiner
- 【Spark Mllib】分类模型——各分类模型使用
- Mysql: 基于MySQL API 接口,Viual Studio,访问 Mysql数据库
- C++ STL 学习 :for_each与仿函数(functor)(一)
- nginx+tomcat分布式部署
- PHP构造函数和析构函数
- mysql数据库的基本用法
- meta的属性