首页 > WEB前端 > JavaScript > 自己写的Jquery实现居中弹框功能
2013
11-06

自己写的Jquery实现居中弹框功能

自己写的Jquery实现居中弹出弹框,可以定义窗口的高度、宽度还有定时关闭的时间、是否开启关闭窗口等功能。

alert

调用很简单的,只要调用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>
最后编辑:
作者:郑 国华
这个作者貌似有点懒,什么都没有留下。

留下一个回复