自己做jQuery开源插件之四：弹出层插件

               自己写的弹出层，基本功能都实现了，功能主要有三个，弹出一个基本的提示框；弹出一个获取用户选择的提示框（带回调函数）和弹出一个加载网页的提示框，提示框的显示采用animate()从页面顶部滑落至页面中间，关闭的时候采用fadeout()淡出效果，代码的注释写的很详细，所以就不详细讲解了，直接上代码，首先是整个插件的所有代码：

(function ($) {
            $.MyDialog = function (param) {
                var MyFunctions = {
                    getheight: function (height) {
                        return (document.documentElement.scrollTop + (document.documentElement.clientHeight - height) / 2) + "px";
                    },
                    getwidth: function (width) {
                        return (document.documentElement.scrollLeft + (document.documentElement.clientWidth - width) / 2) + "px";
                    },
                    //生成遮罩
                    BuildMask: function () {
                        $("body").append("<div id=\"Mymask\" style=\"width:100%; height:100%;opacity:0.7; background-color:Grey; position:fixed; top:0;left:0; z-index:999\"></div>");
                    },
                    //关闭弹出层
                    CloseDialog: function () {
                        $("#Mydialog").fadeOut("slow", function () { $("#Mydialog").remove(); });
                        $("#Mymask").fadeOut("slow", function () { $("#Mymask").remove(); });
                    }
                };

                var setting = $.extend({}, $.MyDialog.defaultParams, param);

                switch (setting.Model) {
                    //普通提示框  
                    case "alert":
                        {
                            //页面添加弹出层
                            $("body").append("<div id=\"Mydialog\" style=\"width: " + setting.width + "px;position:fixed;z-index:1000; height: " + setting.height + "px; border: 1px solid black; font-size: 14px;left:" + MyFunctions.getwidth(setting.width) + "\"><div style=\"background-color:" + setting.titleColor + "; line-height:18px; color: White; height:10%\">" + setting.title + "<img id=\"DialogClose\" src=\"close.png\" style=\"float:right\" /></div><div style=\"background-color:white; height:90%\">" + setting.info + "</div></div>");
                        }; break;
                    //返回用户选择的提示框     
                    case "confirm":
                        {
                            //页面添加弹出层
                            $("body").append("<div id=\"Mydialog\" style=\"width: " + setting.width + "px;position:fixed;z-index:1000; height: " + setting.height + "px; border: 1px solid black; font-size: 14px;left:" + MyFunctions.getwidth(setting.width) + "\"><div style=\"background-color:" + setting.titleColor + "; line-height:18px; color: White; height:10%\">" + setting.title + "<img id=\"DialogClose\" src=\"close.png\" style=\"float:right\" /></div><div id=\"MyDialogContent\" style=\"background-color:white; height:90%\">" + setting.info + "</div></div>");
                            //弹出层中添加两个按钮
                            $("#MyDialogContent").append("<br /><br /><br /><span style=\"width:100%; text-align:center;float:right\"><input id=\"DialogYES\" type=\"button\" value=\"确定\" />    <input id=\"DialogNO\" type=\"button\" value=\"取消\" /></span>");
                            //用户点击”确定“或者”取消“按钮后，触发回调函数，并关闭弹出层
                            $("#DialogYES").click(function () {
                                setting.CallBack("确定");
                                MyFunctions.CloseDialog();
                            });
                            $("#DialogNO").click(function () {
                                setting.CallBack("取消");
                                MyFunctions.CloseDialog();
                            });
                        }; break;
                    //加载html页面的提示框     
                    case "load":
                        {
                            //页面添加弹出层，弹出层中放置一个iframe，用来展示网页
                            $("body").append("<div id=\"Mydialog\" style=\"width: " + setting.width + "px;position:fixed;z-index:1000; height: " + setting.height + "px; border: 1px solid black; font-size: 14px;left:" + MyFunctions.getwidth(setting.width) + "\"><div style=\"background-color:" + setting.titleColor + "; line-height:18px; color: White; height:18px\">" + setting.title + "<img id=\"DialogClose\" src=\"close.png\" style=\"float:right\" /></div><div id=\"MyDialogContent\" style=\"background-color:white; height:90%\"><iframe scrolling=\"no\" frameborder=\"0\" width=\"100%\" height=\"100%\" id=\"Dialogframe\"></iframe></div></div>");
                            $("#Dialogframe").attr("src", setting.url + "?data=" + setting.data);
                        }; break;
                    default: { alert("弹框模式错误，请检查！") }
                }
                if (setting.Mask) {
                    MyFunctions.BuildMask();
                }
                //让提示框从页面顶端缓慢落到页面中间
                $("#Mydialog").animate({ "top": MyFunctions.getheight(setting.height) }, "slow");
                //点击遮罩隐藏遮罩和弹出层
                $("#Mymask").click(function () { MyFunctions.CloseDialog(); });
                //点击关闭按钮隐藏遮罩和弹出层
                $("#DialogClose").click(function () { MyFunctions.CloseDialog(); });
            };
            $.MyDialog.defaultParams = {
                //弹窗模式(alert,confirm,load)
                Model: "alert",
                //若是load，此字段表示需要加载的页面
                url: "",
                //加载html时传参数
                data: "",
                //标题
                title: "",
                //标题栏背景色
                titleColor: "#555555",
                //内容
                info: "",
                //高
                height: 200,
                //宽
                width: 400,
                //是否需要遮罩
                Mask: true,
                //回调函数
                CallBack: null
            };
        })(jQuery)

接着是页面调用代码：

 $(function () {
            $("#btn1").click(function () {
                $.MyDialog({
                    Model: "alert",
                    title: "这是测试窗口标题",
                    Mask: true,
                    info: "这是测试信息",
                    height: 250, 
                    width: 450 });
            });

            $("#btn2").click(function () {
                $.MyDialog({ 
                    Model: "confirm",
                    title: "这是测试窗口标题",
                    Mask: true,
                    info: "确定要删除吗？",
                    height: 200,
                    width: 450, 
                    CallBack: function (result) { alert("回调函数触发，用户点击了\"" + result + "\"按钮"); } });
            });
            $("#btn3").click(function () {
                $.MyDialog({ 
                    Model: "load",
                    title: "这是测试窗口标题",
                    Mask: true,
                    url: "http://www.baidu.com",
                    data: "123",
                    height: 550,
                    width: 650 });
            });
        });

最后是html代码：

<body>
    <form id="form1" runat="server">
    <div>
        <input id="btn1" type="button" value="弹出普通提示框" />
        <input id="btn2" type="button" value="弹出获取用户选择的提示框" />
        <input id="btn3" type="button" value="弹出框内加载html页面" />
    </div>
    </form>
</body>

效果图如下：