个性化自定义弹出窗口，可随意拖动，兼容性已测试

这个弹出窗口的方法是很久之前就已经完成的，也已经在项目中投入使用了，后来经历过几次大修大改，终于敢拿出来和大家分享一下。只不过事先需要说明的是，这个是从我的个人框架中摘出来的，所以有些现在看起来封装的不是太好，各位就将就着看下吧

首先要介绍一个方法，这个方法是从prototype.js中摘录的方法，同时也是prototype.js最底层的核心代码

Object.extend = function (destination, source, source1) {
    for (var property in source) {
        destination[property] = source[property];
    }
    if (typeof source1 != undefined) {
        for (var property1 in source1) {
            destination[property1] = source1[property1];
        }
    }
    return destination;
}

有了这个方法，你可以方便的进行任何扩展，如下面这段代码

var setting={
   name:"aaaaa",
   age:"20",
   addr:""
}
var a=Object.extend({},setting,{qq:"111111"})
alert(a.name+"|"+a.qq)

怎么样？很神奇吧？好了，废话不多说了，咱们进入正题吧。先给大家看看这些参数，注释里都写的很明白了

var dialogSetting = {
    title: null, //弹出窗口要显示的标题
    cont: null, //弹出窗口显示的内容，注意如果配置了ContUrl，那么此配置将不会生效
    ContUrl: undefined, //弹出窗口要加载的页面地址，这里需要ajax，请确认System下面有ajax的方法
    path: "/images/dialog/", //弹出窗口所需的图片存放目录，相对于根目录
    okTit: "确定", //确定按钮要显示的文字
    width: 0, //弹出窗口的宽度，如果不配置此项，那么在IE下宽度将会被强制设定为IEwidth所设定的值
    IEwidth: 350, //此设置只针对IE下无法实现宽度自适应，如果上面已经配置了width不等于0，那么此设置将不会生效
    height: 0, //弹出窗口的高度，无需设置
    image_zindex: 1000, //遮罩层的z-index
    cont_zindex: 2000, //弹出窗口的z-index，请确保此值大于遮罩层的z-index
    scroll: true, //弹出窗口后是否允许页面滚动
    num: 0, //当弹出窗口的数量超过1个的时候需要配置此项，此值表示在创建新的弹出窗口之前页面上已经存在的弹出窗口数量，多个弹出窗口的时候此值至关重要！
    mall: 100, //当前弹出窗口相对于上一个弹出窗口的顶部偏移量，防止2个弹出窗口的标题栏出现重合现象，此设置仅在num不等于0的情况下生效
    _focus: null, //可选值为“ok”和“cancle”。规定鼠标的焦点默认位于哪一个按钮上。此设置仅在type设置为confirm的情况下才会生效
    type: "alert", //可选值为“alert”和“confirm”和“loading”。alert只显示确定按钮，confirm显示确定和取消按钮，并且鼠标的焦点默认位于取消按钮上，loading只显示取消按钮
    remove: function () { },
    ok: function () {
        this.remove();
    },
    cancle: function () {
        this.remove();
    }
};

这个就是弹出窗口中所需要的所有参数，当然有些不能被外界修改的参数我都已经放至函数内部了，大致说明一下这些参数的含义吧！

首先是title和cont这2个参数，这2个是最常用的，用来改变弹出窗口的标题和内容的，如下面这段代码

 System.Dialog({ title: "只显示确定按钮", cont: "这个时候只显示确定按钮" });

默认的话，是只显示确定按钮的，如果要进行更改，就必须指定type参数了。比如你想只显示取消按钮，可以指定 type为loading即可，代码如下

System.Dialog({ title: "只显示取消按钮", cont: "这个时候只显示取消按钮", type: "loading" });

同理，如果要同时显示确定和取消按钮，可以指定type为confirm即可

 System.Dialog({ title: "显示2个按钮", cont: "这个时候会显示确定和取消按钮", type: "confirm" });

这个时候你就发现默认选中的总是取消按钮，如果要让确定按钮处于选中状态，就要使用_focus参数了，将_focus指定为“ok”即可

System.Dialog({ title: "显示2个按钮", cont: "可以设定_focus参数来指定按钮的选中状态", type: "confirm", _focus: "ok" });

接着是 ContUrl这个参数，这个参数的意思是指定弹出窗口要加载的页面地址，为了避免可能出现难以预料的错误，请尽量使用相对于根目录的地址。这个跟cont是互斥的，而且 ContUrl的优先级要高于cont的，如果指定了ContUrl，那么对cont的任何设置都不会生效。

System.Dialog({ title: "只显示确定按钮", ContUrl: "/admin/login.html" });

弹出窗口的宽度和高度一般都不需要设置，因为都是自适应的，只有在IE的某些版本中才会出现宽度无法自适应的情况，这个时候就需要用到 IEwidth这个参数了

System.Dialog({ title: "只显示确定按钮", ContUrl: "/admin/login.html",IEwidth:500 });

需要说明的是这个参数只有在width设置为0的时候才会生效，所以使用之前请注意这个地方。还有，这个加载页面的方法是通过ajax的方法加载的，用的都是innerHTML哦，所以如果要加载的内容里面含有script标签的话，是没有作用的，当然，如果你需要修改加载方式的话，就在代码里面搜索System.Ajax吧！

scroll参数，顾名思义，这个参数就是控制页面滚动的，在某些情况下，弹出窗口后需要禁止页面滚动，而在有些情况下需要保持页面滚动，你可以动态设置scroll的值为true或者false来控制页面的滚动，这个滚动兼容各大浏览器哦！

num和mall参数，这2个参数是后来加上去的，主要是因为在使用的过程中发现如果弹出2个窗口的话，窗口的标题栏和左则都重叠到一起了，所以才设置这2个参数来动态设置窗口的偏移量，偏移量都是相对于上一个弹出窗口的。num参数默认为0，表示只有1个弹出窗口，不需要进行任何位置偏移。每增加1个弹出窗口请将num值加1。而mall值则是为了控制偏移的大小的，这个就不需要多做说明了。

ok和cancle这2个参数主要是指定确定按钮和取消按钮要绑定的回调函数，以此来模拟conform的阻塞效果。具体代码如下

 
System.Dialog({ title: "显示2个按钮", type: "confirm", cont: "这个时候会显示确定和取消按钮,并可以为按钮分别绑定回调函数", ok: function () {
                        alert(" 你点击了确定按钮");
                        this.remove();
                }, cancle: function () {
                           alert(" 你点击了取消按钮");
                           this.remove();
               }
             });

好了，参数基本上已经介绍完毕了，下面给大家说明一下如何让多个弹出窗口共存或者同时关闭。默认情况下，在ok或者cancle事件中调用this.remove()事件即可关闭弹出窗口，但多个弹出窗口的时候，这个方法是没办法关闭上一个弹出窗口的，因为this的指向已经发生了改变，所以需要另辟蹊径，具体代码如下

System.Dialog({ title: "多个窗口共存", type: "confirm", cont: "多个窗口共存，并可同时关闭", ok: function () {
        var me = this;
        System.Dialog({ title: "执行结果", cont: "你点击了确定按钮", num: 1, ok: function () {
            this.remove();
           me.remove();
        }
        });

}, cancle: function () {
           var me = this;
           System.Dialog({ title: "执行结果", cont: "你点击了取消按钮", num: 1, ok: function () {
            this.remove();
            me.remove();
           }
           });
        }
    });

最后给大家上一个效果图吧，2个弹出窗口的

下载地址稍候奉上