遮罩层模态框插件实现思路（jQuery）

1.遮罩层使用JS写入，DOM渲染完毕后初始化插件；

2.为实现同一页面多次调用，每次呼出时为遮罩层分配一个ID，模态框内容采用动态写入的方式，关闭模态框时将遮罩层初始化；

3.模态框主要分为三种类型，类alert、类confirm、类prompt（按钮：确定/取消）；

4.在此思路基础上可继续根据模态框内容继续分类，完全格式化模态框；

5.其他参数，例如窗体大小，是否可改变，点击遮罩层是否可以隐藏，是否可拖拽，触发事件，回调函数等。

基本思路有了，接下来就是着手实现了。

首先，声明一个构造函数：

var myMask = function (element, options) {
   
        this.caller = $(element);
        this.options = options;
        this.isShown = false;
        this.init();
}

这样就获得了一个拥有三个属性的myMask对象并将其初始化了。
首先为对象设置一些默认的选项：

myMask.Defaults = {
    dialog_type: 'alert',
    dialog_title: '提示信息',
    content_type: 'msg',
    dialog_content: '提交成功！',
    dialog_width: 600,
    Mask_click_close: true,
    is_draggable: false,
    show_Mask_Events: ['click'],
    close_Mask_Events: ['click'],
    selector: this.selector,
    before_show_callback: null, 
    shown_callback: null,
    after_close_callback: null
}

只有默认选项显然是不够用的，因此需要扩展它：

myMask.Options = $.extend(myMask.Defaults, this.options);

而在构造函数中用以初始化对象而调用的init方法是什么呢？还没有定义。因此，下一步就是要先为这个对象定义它的第一个方法：

myMask.prototype.init=function(){
    if (!$(".Mask").length) {
         $("body script").first().before('<div class="Mask"></div>');
         document.getElementsByClassName('Mask')[0].innerHTML += '<div class="dialog"></div>';
         this.dialog = document.getElementsByC