jquery dialog——彈出框1

在做一個系統時，很多時候需要把一個頁面彈出來，讓用戶做選擇一些選擇或者頁面太小也可以以彈出框的形式來做。但是又不想用瀏覽器自帶的彈出框，這時我們需要自己做一個。下面我們就做一個最簡單的彈出框，即有一個陰影遮蓋層，然后做一個居中顯示的層，最后在居中的層中加一個iframe即可，一個彈出層就做好了。

 示例

 

 

CSS代碼

 

html, body
{
    height: 100%;
    padding: 0;
    margin: 0;
}
.dFilter
{
    position: absolute;
    width: 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;
    width: 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;
    width: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, //彈出框的高度
                width: 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({ width: 800, height: 400, title: "博客園", src: "http://www.cnblogs.com" });
            });
        });
    </script>