用jQuery写的一个简单的弹出窗口(IE7\IE8\FF3)
2009-03-28 01:42
573 查看
下面的代码改编自廖帮请同学的弹出窗口代码，实现了动画方式的弹出和关闭窗口。因无法上传图片，只好看代码了：
一、弹出div写在html的body之前：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<style type="text/css">
#divDialog{border-style:solid;border-width:1px;border-color:#3391EE;background: white;text-align: left;position: absolute; display: none; z-index:9999}
#divDialogHeader{height:20px;padding: 4px 4px 4px 4px; background-color:#ccc;text-align: left;font-weight: bold;text-decoration: none;}
#divDialogClose{position:absolute;right:0px;top:0px;height:18px;width:18px;margin:4px;cursor:pointer; background:url('img/close.png');}
#divDialogContent{padding:10px;overflow:auto;}
.closeBg{background:url('close.png') no-repeat;}
.closeBgHover{background:url('closeover.png') no-repeat;}
</style>
<script type="text/javascript">
//这是一个居中的jQuery插件,来自(--http://www.cnblogs.com/stu-acer/archive/2008/10/11/1308704.html--), 只是复制过来使用
$.fn.centerInClient = function(options) {
var opt = {
container: window, // selector of element to center in
completed: null
};
$.extend(opt, options);
return this.each(function(i) {
var el = $(this);
var jWin = $(opt.container);
var isWin = opt.container == window;
el.css("position", "absolute");
var heightFudge = 2.2;
var x = (isWin ? jWin.width() :
jWin.outerWidth()) / 2 - el.outerWidth() / 2;
var y = (isWin ? jWin.height() :
jWin.outerHeight()) / heightFudge - el.outerHeight() / 2;
el.css({ left: x + jWin.scrollLeft(),
top: (y + jWin.scrollTop())/2 });
var zi = el.css("zIndex");
if (!zi || zi == "auto")
el.css("zIndex", 1);
if (opt.completed)
opt.completed(this);
});
}
</script>
<script type="text/javascript">
function showDialog(options) {
var defaults = {
url: null,
title: 'Dialog',
width: 580,
height: 280,
bColor: "#777", //背景色
bWidth: $(window).width() + "px", //背景宽度
bHeight: $(window).height() + "px" //背景高度
};
$.extend(defaults, options);
var dialog = $("#divDialog");
var header = $("#divDialogHeader");
var close = $("#divDialogClose");
var content = $("#divDialogContent");
var backdiv = $("#maskdiv");
dialog.append(header).append(close).append(content);
$("body").append(dialog).append(backdiv);
header.text(defaults.title);
dialog.draggable({ handle: header });
dialog.hide()
.width(defaults.width)
.height(defaults.height)
.slideDown("slow")
.css("opacity", .90)
.centerInClient();
close.hover(function() {
$(this).addClass("closeBgHover");
$(this).removeClass("closeBg");
}, function() {
$(this).addClass("closeBg");
$(this).removeClass("closeBgHover");
}).click(function() {
closeDialog();
});
content.width(defaults.width - 21).height(defaults.height - 50);
if (defaults.url) {
content.load(defaults.url);
}
if (!($("#maskdiv").length)) $("body").append($("#maskdiv"));
$("#maskdiv").css({ "background": defaults.bColor, "width": defaults.bWidth, "height": defaults.bHeight, "z-index": "9990", "position": "absolute", "filter": "alpha(opacity:90)", "left": 0, "top": 0 }).fadeIn(800);
}
function closeDialog() {
$("#maskdiv").fadeOut(1000);
$("#divDialog").slideUp();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a id="create-user" href="#" onclick="showDialog({ title: '弹出窗口', url: 'Message.aspx', width: 540, height: 380 });" >弹出窗口</a>
</div>
<div id="divDialog">
<div id="divDialogHeader">标题</div><div id="divDialogClose" class="closeBg"></div>
<div id="divDialogContent">内容</div>
</div>
<div id='maskdiv'></div>
</form>
</body>
</html>
二 弹出div通过js代码动态生成,和上面的代码大同小异
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>无标题页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<style type="text/css">
#divDialog{border-style:solid;border-width:1px;border-color:#3391EE;background: white;text-align: left;position: absolute; display: none; z-index:9999}
#divDialogHeader{height:18px;padding: 4px 4px 4px 8px; background-color:#8bf;text-align: left;font-weight: bold;text-decoration: none; margin:0px auto;}
#divDialogClose{position:absolute;right:0px;top:0px;height:18px;width:18px;margin:4px;cursor:pointer; background:url('img/close.png');}
#divDialogContent{padding:10px;overflow:auto;}
.closeBg{background:url('img/close.png') ;}
.closeBgHover{background:url('img/closeover.png') ;}
</style>
<script type="text/javascript">
function showDialog(options) {
var defaults = {
url: null,
title: 'Dialog',
width: 580,
height: 280,
bColor: "#777", //背景色
bWidth: $(window).width() + "px", //背景宽度
bHeight: $(window).height() + "px" //背景高度
};
$.extend(defaults, options);
var dialog = $("<div id='divDialog'></div>");
var header = $("<div id='divDialogHeader'>标题</div>");
var close = $("<div id='divDialogClose' class='closeBg'></div>");
var content = $("<div id='divDialogContent'>内容</div>");
var backdiv = $("<div id='backdiv'></div>");
dialog.append(header);
dialog.append(close);
dialog.append(content);
dialog.appendTo("body");
header.text(defaults.title);
dialog.draggable({ handle: header });
$("body").append(backdiv);
backdiv.css({ "background": defaults.bColor, "width": defaults.bWidth, "height": defaults.bHeight, "z-index": "9990", "position": "absolute", "filter": "alpha(opacity:80)", "left": 0, "top": 0 });
dialog.hide()
.width(defaults.width)
.height(defaults.height)
.slideDown(1000)
.css("opacity", .90);
close.hover(function() {
$(this).addClass("closeBgHover");
$(this).removeClass("closeBg");
}, function() {
$(this).addClass("closeBg");
$(this).removeClass("closeBgHover");
}).click(function() {
$("#divDialog").remove();
$("#backdiv").remove();
});
content.width(defaults.width - 21)
.height(defaults.height - 50);
if (defaults.url) {
content.load(defaults.url);
}
}
function closeDialog() {
$("#divDialog").remove();
$("#backdiv").remove();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a id="create-user" href="#" onclick="showDialog({ title: '弹出窗口', url: 'Message.aspx', width: 600, height: 380 });" >弹出窗口</a>
</div>
</form>
</body>
</html>
Message.aspx 代码也贴一下吧，有不明白的地方可以留言咨询
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<p>窗口测试</p>
<div><img src="img/grass2.jpg" /><div id="images"></div></div>
<p><input type="button" onclick="top.closeDialog();" value="关闭窗口" /></p>
</div>
</form>
</body>
</html>
两种方式均可实现弹出窗效果，只是第二种方式无法实现动画效果，推荐使用第一种方式
希望本程序能对您有所帮助！
一、弹出div写在html的body之前：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<style type="text/css">
#divDialog{border-style:solid;border-width:1px;border-color:#3391EE;background: white;text-align: left;position: absolute; display: none; z-index:9999}
#divDialogHeader{height:20px;padding: 4px 4px 4px 4px; background-color:#ccc;text-align: left;font-weight: bold;text-decoration: none;}
#divDialogClose{position:absolute;right:0px;top:0px;height:18px;width:18px;margin:4px;cursor:pointer; background:url('img/close.png');}
#divDialogContent{padding:10px;overflow:auto;}
.closeBg{background:url('close.png') no-repeat;}
.closeBgHover{background:url('closeover.png') no-repeat;}
</style>
<script type="text/javascript">
//这是一个居中的jQuery插件,来自(--http://www.cnblogs.com/stu-acer/archive/2008/10/11/1308704.html--), 只是复制过来使用
$.fn.centerInClient = function(options) {
var opt = {
container: window, // selector of element to center in
completed: null
};
$.extend(opt, options);
return this.each(function(i) {
var el = $(this);
var jWin = $(opt.container);
var isWin = opt.container == window;
el.css("position", "absolute");
var heightFudge = 2.2;
var x = (isWin ? jWin.width() :
jWin.outerWidth()) / 2 - el.outerWidth() / 2;
var y = (isWin ? jWin.height() :
jWin.outerHeight()) / heightFudge - el.outerHeight() / 2;
el.css({ left: x + jWin.scrollLeft(),
top: (y + jWin.scrollTop())/2 });
var zi = el.css("zIndex");
if (!zi || zi == "auto")
el.css("zIndex", 1);
if (opt.completed)
opt.completed(this);
});
}
</script>
<script type="text/javascript">
function showDialog(options) {
var defaults = {
url: null,
title: 'Dialog',
width: 580,
height: 280,
bColor: "#777", //背景色
bWidth: $(window).width() + "px", //背景宽度
bHeight: $(window).height() + "px" //背景高度
};
$.extend(defaults, options);
var dialog = $("#divDialog");
var header = $("#divDialogHeader");
var close = $("#divDialogClose");
var content = $("#divDialogContent");
var backdiv = $("#maskdiv");
dialog.append(header).append(close).append(content);
$("body").append(dialog).append(backdiv);
header.text(defaults.title);
dialog.draggable({ handle: header });
dialog.hide()
.width(defaults.width)
.height(defaults.height)
.slideDown("slow")
.css("opacity", .90)
.centerInClient();
close.hover(function() {
$(this).addClass("closeBgHover");
$(this).removeClass("closeBg");
}, function() {
$(this).addClass("closeBg");
$(this).removeClass("closeBgHover");
}).click(function() {
closeDialog();
});
content.width(defaults.width - 21).height(defaults.height - 50);
if (defaults.url) {
content.load(defaults.url);
}
if (!($("#maskdiv").length)) $("body").append($("#maskdiv"));
$("#maskdiv").css({ "background": defaults.bColor, "width": defaults.bWidth, "height": defaults.bHeight, "z-index": "9990", "position": "absolute", "filter": "alpha(opacity:90)", "left": 0, "top": 0 }).fadeIn(800);
}
function closeDialog() {
$("#maskdiv").fadeOut(1000);
$("#divDialog").slideUp();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a id="create-user" href="#" onclick="showDialog({ title: '弹出窗口', url: 'Message.aspx', width: 540, height: 380 });" >弹出窗口</a>
</div>
<div id="divDialog">
<div id="divDialogHeader">标题</div><div id="divDialogClose" class="closeBg"></div>
<div id="divDialogContent">内容</div>
</div>
<div id='maskdiv'></div>
</form>
</body>
</html>
二 弹出div通过js代码动态生成,和上面的代码大同小异
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>无标题页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<style type="text/css">
#divDialog{border-style:solid;border-width:1px;border-color:#3391EE;background: white;text-align: left;position: absolute; display: none; z-index:9999}
#divDialogHeader{height:18px;padding: 4px 4px 4px 8px; background-color:#8bf;text-align: left;font-weight: bold;text-decoration: none; margin:0px auto;}
#divDialogClose{position:absolute;right:0px;top:0px;height:18px;width:18px;margin:4px;cursor:pointer; background:url('img/close.png');}
#divDialogContent{padding:10px;overflow:auto;}
.closeBg{background:url('img/close.png') ;}
.closeBgHover{background:url('img/closeover.png') ;}
</style>
<script type="text/javascript">
function showDialog(options) {
var defaults = {
url: null,
title: 'Dialog',
width: 580,
height: 280,
bColor: "#777", //背景色
bWidth: $(window).width() + "px", //背景宽度
bHeight: $(window).height() + "px" //背景高度
};
$.extend(defaults, options);
var dialog = $("<div id='divDialog'></div>");
var header = $("<div id='divDialogHeader'>标题</div>");
var close = $("<div id='divDialogClose' class='closeBg'></div>");
var content = $("<div id='divDialogContent'>内容</div>");
var backdiv = $("<div id='backdiv'></div>");
dialog.append(header);
dialog.append(close);
dialog.append(content);
dialog.appendTo("body");
header.text(defaults.title);
dialog.draggable({ handle: header });
$("body").append(backdiv);
backdiv.css({ "background": defaults.bColor, "width": defaults.bWidth, "height": defaults.bHeight, "z-index": "9990", "position": "absolute", "filter": "alpha(opacity:80)", "left": 0, "top": 0 });
dialog.hide()
.width(defaults.width)
.height(defaults.height)
.slideDown(1000)
.css("opacity", .90);
close.hover(function() {
$(this).addClass("closeBgHover");
$(this).removeClass("closeBg");
}, function() {
$(this).addClass("closeBg");
$(this).removeClass("closeBgHover");
}).click(function() {
$("#divDialog").remove();
$("#backdiv").remove();
});
content.width(defaults.width - 21)
.height(defaults.height - 50);
if (defaults.url) {
content.load(defaults.url);
}
}
function closeDialog() {
$("#divDialog").remove();
$("#backdiv").remove();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a id="create-user" href="#" onclick="showDialog({ title: '弹出窗口', url: 'Message.aspx', width: 600, height: 380 });" >弹出窗口</a>
</div>
</form>
</body>
</html>
Message.aspx 代码也贴一下吧，有不明白的地方可以留言咨询
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<p>窗口测试</p>
<div><img src="img/grass2.jpg" /><div id="images"></div></div>
<p><input type="button" onclick="top.closeDialog();" value="关闭窗口" /></p>
</div>
</form>
</body>
</html>
两种方式均可实现弹出窗效果，只是第二种方式无法实现动画效果，推荐使用第一种方式
希望本程序能对您有所帮助！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何避免在IE中执行window.close()后弹出一个新IE窗口
- jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
- jQuery弹出窗口简单实现代码
- 一个类似QQ弹出窗口的JQUERY插件
- 弹出一个不带地址栏、工具栏的IE非模态窗口
- jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
- 如何在WebBrowser打开的网页链接后直接在WebBrowser打开而不是新弹出一个IE窗口来打开
- 分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js
- 推荐一个jQuery弹出模态窗口的插件（源码下载）
- 一个很不错的jQuery弹出窗口插件Facebox
- 自己写了一个jQuery的弹出层，非常非常简单
- jquery 弹出一个淡出窗口示例代码
- jquery实现弹出确认是否删除的一个简单代码
- [转载]弹出一个不带地址栏、工具栏的IE非模态窗口
- 打开一个iframe，从iframe更改父窗口parent里面的内容,jquery弹出窗口插件fancybox的使用
- 一个通过asp.net弹出窗口不被IE阻止的方法
- jQuery实现简单弹出窗口
- 写一个jquery弹出层插件gbox，简单多功能...
- JQuery中一个简单的表单验证的实例
- 弹出一个满屏的窗口