自己写的Jquery实现居中弹出弹框,可以定义窗口的高度、宽度还有定时关闭的时间、是否开启关闭窗口等功能。
调用很简单的,只要调用Jquery的主库和UI库即可。
适用于发送网站公告,展示Ajax返回的提示信息等。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jquery实现居中弹出弹框</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> (function(){ $(function(){ $.alert = function(message, timeToLive, options){ var ttl = timeToLive || 10000; //10秒后自动关闭窗口 var defaultOptions = $.extend({ title:"www.web8899.com", //窗口的名称,可以随便更改 height: 200, //窗口的高度 width: 385, //窗口的宽度 modal: false, open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, //不显示关闭按钮 closeOnEscape: false },options || {}); if(!$("#jquery_alert").length){ $("body").append("<div id='jquery_alert' />"); } $("#jquery_alert").dialog(defaultOptions); $("#jquery_alert").html(message); $("#jquery_alert").dialog("open"); setTimeout(function(){ $("#jquery_alert").dialog("close"); window.location.href="http://www.2345.com/?k123694438"; },ttl); } }); }()); $(document).ready(function(){ $.alert("Jquery实现居中弹出弹框,<br />亲们可以换行的哦!"); }); </script> </body> </html> |
- 本文固定链接: http://www.web8899.com/web_develop/javascript/107.html
- 转载请注明: 郑 国华 于 迈向卓越 发表