如何实现一个自定义的ModelDialog JavaScript模态对话框类？

ModelDialog 是一个 JavaScript 模态对话框类，用于创建和管理模态对话框。

ModelDialog JavaScript 模态对话框类代码

构造函数参数

参数名	默认值	描述
`caption`	'对话框标题'	对话框的标题，指定用于显示在对话框的文本。
`template`	''	对话框的主体内容，可以是HTML模板。
`dialogCls`	'md-dialog'	对话框的className，用于样式定制。
`headCls`	'md-head'	对话框头部的CSS类名，控制头部样式。
`btnCloseCls`	'md-close'	关闭按钮的CSS类名，指定关闭按钮的样式。
`bodyCls`	'md-body'	对话框主体部分的CSS类名，控制主体内容区的样式。
`shadowBg`	'gray'	遮盖层的背景颜色，创建半透明的遮罩效果。
`shadowOpy`	0.2	遮盖层的透明度，表示遮罩层的不透明度（0为完全透明）。
`dragable`	true	是否允许用户拖动对话框。
`dragInWin`	true	是否限制拖动范围在窗口内，与`area`互斥。
`area`	[minX,maxX,minY,maxY]	对话框的拖动区域限制，用[minX, maxX, minY, maxY]表示，与`dragInWin`互斥。

核心代码示例

/**
 * JavaScript ModelDialog v0.4
 * Copyright (c) 2010 snandy
 */
ModelDialog = function() {
    var px = 'px';
    var isIE = /msie/.test(navigator.userAgent.toLowerCase());
    
    function getViewSize() {
        return {
            w: window['innerWidth'] || document.documentElement.clientWidth,
            h: window['innerHeight'] || document.documentElement.clientHeight
        }
    }
    
    function getFullSize() {
        var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) + Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        return { w: w, h: h };
    }
    
    this.init = function(options) {
        options = options || {};
        this.caption = options.caption || '对话框标题';
        this.template = options.template || '';
        this.dialogCls = options.dialogCls || 'md-dialog';
        this.headCls = options.headCls || 'md-head';
        this.btnCloseCls = options.btnCloseCls || 'md-close';
        this.bodyCls = options.bodyCls || 'md-body';
        this.shadowBg = options.shadowBg || 'gray';
        this.shadowOpy = options.shadowOpy || 0.2;
        this.dragable = options.dragable !== undefined ? options.dragable : true;
        this.dragInWin = options.dragInWin !== undefined ? options.dragInWin : true;
        this.area = options.area || [0, 0, 0, 0];
        
        // 实例化 ModelDialog 对象并配置其属性
        // 这里省略了具体的实现细节，可以参考完整的源码进行详细查看和学习
    }
}