jquery dialog——弹出框1

在做一个系统时，很多时候需要把一个页面弹出来，让用户做选择一些选择或者页面太小也可以以弹出框的形式来做。但是又不想用浏览器自带的弹出框，这时我们需要自己做一个。下面我们就做一个最简单的弹出框，即有一个阴影遮盖层，然后做一个居中显示的层，最后在居中的层中加一个iframe即可，一个弹出层就做好了。

 示例

CSS代码

html, body
{
    height: 100%;
    padding: 0;
    margin: 0;
}
.dFilter
{
    position: absolute;
     100%;
    height: 100%;
    z-index: 999;
    background-color:Gray;
    left: 0px;
    top: 0px;
}
.dBody
{
    position: absolute;
    z-index: 1000;
    border: 2px solid #C4D9F6;
    background-color: white;
}
.dHeader
{
    background-image: url(../img/bg_bar02.jpg);
    height: 20px;
     100%;
    line-height: 20px;
}
.dHeader label
{
    color: Black;
    float: left;
    font-weight: bold;
    margin-left: 5px;
    line-height:20px;
}
.dHeader img
{
    float: right;
    height:18px;
    18px;
    background-image: url(../img/close.png);
}

JS 代码

/*
    Create By:Mike.Jiang
    Create Date:2012-07-03
*/
var Dialog = {

    RemoveDialog: function() {
        $("#dFilter").remove();
        $("#dBody").remove();
        Dialog.ShowSelect();
    }
}
$(function() {
    $.fn.extend({
        ShowDialog: function(options) {
            //插件内部函数
            var nFun = {
                HideSelect: function() {
                    $("select").hide();
                },
                ShowSelect: function() {
                    $("select").show();
                },
                RemoveDialog: function() {
                    $("#dFilter").remove();
                    $("#dBody").remove();
                    nFun.ShowSelect();
                },
                CenterShow: function(dBody, width, height) {
                    var topPX = 0;
                    topPX = $(document.documentElement).height() - height;
                    if (topPX < 0) {
                        topPX = 0;
                    } else {
                        topPX = $(document.documentElement).scrollTop() + topPX / 2;
                    }
                    var leftX = $(document.documentElement).width() - width;
                    if (leftX < 0) {
                        leftX = 0;
                    } else {
                        leftX = $(document.documentElement).scrollLeft() + leftX / 2;
                    }
                    dBody.css({ "left": leftX + "px", "top": topPX + "px" });
                }
            }
            var settings = {
                height: 400, //弹出框的高度
                 400, //弹出框的宽度
                title: "标题", // 弹出框的标题
                src: "", //弹出框的页面URL
                beforeShow: nFun.HideSelect, //在显示弹出框之前的方法
                afterClose: nFun.ShowSelect //在关闭弹出框之后的方法
            };
            if (options) {
                $.extend(settings, options);
            }
            nFun.RemoveDialog();
            settings.beforeShow();
            //背影遮盖(是否为模式窗口)
            var dFilter = $('<div id="dFilter" class="dFilter"></div>').appendTo(document.body);
            dFilter.css("opacity", "0.5");
            dFilter.css("height", $(document).height());
            dFilter.css("width", $(document).width());
            //弹出页面的主DIV
            var dBody = $('<div id="dBody" class="dBody"  ></div>').appendTo(document.body);
            var dBodyHeight = settings.height + 20;
            dBody.css({ "width": settings.width + "px", "height": dBodyHeight + "px" });
            //弹出页面的头部
            var dHeader = $('<div class="dHeader" ></div>').appendTo(dBody);
            //弹出页面的标题
            var dTitle = $('<label></label>').appendTo(dHeader);
            dTitle.text(settings.title);
            //弹出页面的关闭按钮
            var dClose = $('<img alt="" />').appendTo(dHeader);
            //弹出页面的内容容器iframe
            var dIframe = $('<iframe frameborder="0"  ></iframe>').appendTo(dBody);
            
            //设置弹出框的宽高
            var dIframeWidth = settings.width;
            dIframe.attr({ "width": dIframeWidth + "px", "height": settings.height + "px", "src": settings.src });
            
            //设置弹出框居中显示
            nFun.CenterShow(dBody, settings.width, settings.height);
            //关闭按钮事件
            dClose.click(function() {
                nFun.RemoveDialog();
                settings.afterClose();
            });
            $(window).resize(function() {
                nFun.CenterShow(dBody, settings.width, settings.height);
            });
        }
    });
});

HTML代码

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnPopup").click(function() {
                $(window).ShowDialog({  800, height: 400, title: "博客园", src: "http://www.cnblogs.com" });
            });
        });
    </script>