自己写的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
- 转载请注明: 郑 国华 于 迈向卓越 发表
这个作者貌似有点懒，什么都没有留下。