用jQuery写的一个简单的弹出窗口(IE7\IE8\FF3)

下面的代码改编自廖帮请同学的弹出窗口代码，实现了动画方式的弹出和关闭窗口。因无法上传图片，只好看代码了：

一、弹出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-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;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',
            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', 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-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;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',
            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', 600, height: 380 });" >弹出窗口</a>
    </div>
    </form>
</body>
</html>

Message.aspx 代码也贴一下吧，有不明白的地方可以留言咨询

两种方式均可实现弹出窗效果，只是第二种方式无法实现动画效果，推荐使用第一种方式

希望本程序能对您有所帮助！

相关阅读:
【leetcode】1442. Count Triplets That Can Form Two Arrays of Equal XOR
【leetcode】1441. Build an Array With Stack Operations
【leetcode】1437. Check If All 1's Are at Least Length K Places Away
cxCheckCombobox
修改现有字段默认值
2018.01.02 exprottoexcel
Statusbar OwnerDraw
dxComponentPrinter记录
单据暂存操作思路整理
设置模式9（装饰者，责任链，桥接，访问者）

原文地址：https://www.cnblogs.com/lvlin/p/1423800.html