js写的一个模态对话框
作者 斯人 | 发布于 2012 年 3 月 8 日

前几天做项目..
有个需求.
JS做一个模态对话框.
要求:点击确认 取消按钮可以执行回调函数
看图.

这样的一个通用窗口..

ST.UI={
    ModeWindow: (function (){
			var Controller=null;
            function construct(){
               setting={
                    ID:'window ID',
                    TitleText:'',
                    Content:'content Text',     //
                    Parent:null,                //窗口的父句柄 默认是加到 body里
                    boxCss:'class03_tank ',
                    TitleCss:'class03_tank_top',      //标题CSS
                    ContentCss:'padtb10',   //内容CSS
                    width:280,
                    height:'auto',
                    button:'submit,cancel',     //按钮类型,submit:提交,cancel:取消
                    submitcall:null,//点击确定按钮的CALLBACK
                    cancelcall:null//点击取消按钮的CALLBACK
                }
                function _createWindow(opt){
                    var windowID=opt.ID,top,left;
                    if(windowID==null)
                        return null;
                    if($('#'+opt.ID).length>0) {
                        $('#'+opt.ID).remove();
                    }
                    if(!opt.left)
                        opt.left=($(window).width()-opt.width)/2;
                    if(!opt.top)
                        opt.top =($(window).height())/3+$(document).scrollTop()
                    var parent=(opt.Parent==null || opt.parent.length==0)?$('body'):$(opt.Parent);
                    var box=$('<div>').attr('id',windowID).addClass(opt.boxCss).width(opt.width).height(opt.height).css({'left':opt.left,'top':opt.top,'z-index':1111,'position':'absolute'});
                    parent.append(box)
                    return $('#'+opt.ID);
                }
                function _setWindowConstruct(w,opt){ //创建窗体内部结构
                    w.subobj=w.obj;
                    //创建标题
                    w.subobj.append($('<div>').addClass('class03_tank_top').append(
                        $('<div>').addClass('class03_tank_topc').append(
                                w.close=$('<a>').attr('title','关闭').addClass('btnax fr bgcfff mart04').html('×')
                            ).append(
                                $('<span>').addClass('disin_bl lineh30 marl10').html(opt.TitleText)
                            )
                        )
                    )
                    //创建内容
                    w.subobj.append(
                        $('<div>').addClass('class03_tank_con bgcfff').css({'text-align':'center'}).append(
                            $('<div>').attr('id','content_ui_'+opt.ID).addClass(opt.ContentCss)
                        )
                    );
                    //创建底部
                    w.subobj.append('<div class="" style="margin-top:0;"><b class="yz_b01 "></b><b class="yz_b02 "></b><b class=" yz_b03 yz_b00"></b></div>')
                    return w;
                }
                function _setWindowSubmitButton(w,opt){  //设置按钮
                    var p=$('<p>').addClass('class03_tank_p');
                    var submit=$('<a>'),cancel=$('<a>');
                    btn=opt.button.split(',');
                    if(ST.Base.inArray(btn,'submit')>-1){
                        p.append(submit.addClass('btnqx01').html('确定').bind('click',function(){
                            if((opt.submitcall&&opt.submitcall()!==false)||opt.submitcall==null){
                                $('#'+opt.ID).remove();
                                $('#MW_BACKOVER').hide();
                            }
                            if(ST.UI.timeId!=null)
                                window.clearTimeout(ST.UI.timeId);
                            
                        }))
                    }
                    if(ST.Base.inArray(btn,'cancel')>-1){
                        p.append(cancel.addClass('btnqx01 marlr06').html('关闭').bind('click',function(){
                            if((opt.cancelcall&&opt.cancelcall()!==false)||opt.cancelcall==null){
                                $('#'+opt.ID).remove();
                                $('#MW_BACKOVER').hide();
                            }
                            if(ST.UI.timeId!=null)
                                window.clearTimeout(ST.UI.timeId);
                                
                        }))
                    }
                    w.close.bind('click',function(){
                        $('#'+opt.ID).remove();
                        $('#MW_BACKOVER').hide();
                    })
                   w.obj.children('.class03_tank_con').append(p)
                }
                function _setBackover(w){    //创建遮盖层
                    if($('#MW_BACKOVER').length>0){
                        $('#MW_BACKOVER').show();
                        return;
                    }
					$("body").append(
						$("<div>")
						.attr("id", "MW_BACKOVER")
						.css({
							"background-color": "#ddd",
							"position": "fixed",
							"top": "0",
							"left": "0",
							"width": "100%",
							"height": "100%",
							"display": "block",
							"opacity": 0.5,
                            'z-index':10
						})
					);                    
                }
                return function(opt){ 
                        opt=ST.extend(setting,opt);
                        //创建窗体容器对象
                        var w=_createWindow(opt);
                        if(!w){
                            return false;
                        }
                        windowObj={'obj':w,'subobj':null};
                        windowObj=_setWindowConstruct(windowObj,opt);
                        _setBackover(windowObj,opt)
                        _setWindowSubmitButton(windowObj,opt);
                        return {
                            getObject:function(){
                                return windowObj;
                            },
                            close:function(){
                                $(windowObj['obj']).remove();
                                $('#MW_BACKOVER').hide();
                                return this;
                            },
                            setContent:function(content){
                                $('#content_ui_'+opt.ID).html(content);
                                return this;
                            },
                            load:function(url,callback){
                                $('#content_ui_'+opt.ID).load(url+'&r='+Math.random(),callback);
                                
                                return this;
                            }
                        }
                }
            }
            return function(option){
                Controller=construct();
                return Controller(option)
            }
		})(),
        //静态对话框
        StaticWindow:(function(){
           var Controller=null;
            function _construct(opt){
                setting={
                    ID:'',
                    left:0,
                    top:0,
                    width:200,
                    height:100,
                    css:'bgcfff',
                    parent:'',
                    buttonCss:'class03_tank_p',
                    buttonCssRep:null,  //按钮附加参数
                    button:'sure,cancle',
                    buttonText:null,    //按钮附加文本
                    layer:null
                }
                function _createWindow(opt){
                    if($('#'+opt.ID).length>0)
                        $('#'+opt.ID).remove();
                    if(opt.layer!=null){
                        opt.left=(opt.layer.pageX);
                        opt.top=(opt.layer.pageY+$(opt.layer.target).height());
                    }
                    
                    var box=$('<div>').addClass(opt.css).css({'position':'absolute','height':opt.height,'width':opt.width,'border':'1px solid #ccc','z-index':100,'left':opt.left,'top':opt.top}).attr('id',opt.ID),              
                    parent=opt.parent!=''?$(opt.parent):$('body');
                    parent.append(box);
                    return $('#'+opt.ID);
                };
                function _setWindowConstruct(obj,opt){
                    obj.html('')
                    obj.append($('<div>').attr('id','static_content_'+opt.ID))
                }
                function _setButton(obj,opt){
                    btn=opt.button.split(',');
                    p=$('<p>').addClass(opt.buttonCss).css({'position':'absolute','bottom':0,'width':(opt.width-13)})
                    if(opt.buttonCssRep!=null)
                        p.css(opt.buttonCssRep);
                    if(ST.Base.inArray(btn,'sure')>-1){
                    var sure=$('<a>').addClass('btnqx01').html('确认').click(function(e){
                            if((opt.surebtn&&opt.surebtn(e)!==false)||opt.surebtn==null){
                                obj.remove();
                            }
                        })
                         p.append(sure)
                    }
                    if(ST.Base.inArray(btn,'cancle')>-1){
                        cancel=$('<a>').addClass('btnqx01 marlr06').html('取消').click(function(e){
                            if((opt.cancelbtn&&opt.cancelbtn(e)!==false)||opt.cancelbtn==null){
                                obj.remove();
                            }
                        })
                        p.append(cancel);
                    }
                    if(opt.buttonText!=null)
                        p.append(opt.buttonText)
                    obj.append(p)
                    
                }
                return function(opt){
                    opt=ST.extend(setting,opt);
                    var w=_createWindow(opt);
                    if(!w) return false;
                    _setWindowConstruct(w,opt);
                    _setButton(w,opt);
                    return{
                        close:function(){
                            w.remove()
                        },
                        setContent:function(content){
                            $('#static_content_'+opt.ID).html(content);
                        },
                        append:function(obj){
                            $('#static_content_'+opt.ID).append(obj);
                        },
                        load:function(url,callback){
                            $('#static_content_'+opt.ID).load(url,callback)
                        }
                    }
                }
            }
            return function(option){
                Controller=_construct();
                return Controller(option);
            }
        })()
    }

}

我这里写了两种..还有一种是 没有 标题..只有内容的对话框.
使用方法
var w=ST.UI.ModeWindow({
‘ID’:’窗口ID’,
‘TitleText’:’标题’,
‘submitcall’:function(){
//确认按钮执行的方法
},
‘cancelcall’:function(){
//取消按钮执行的方法
},
‘width’:’宽’,
‘height’:’高’,
‘boxCss’:’窗体样式’,//
‘TitleCss’:’标题样式’,
‘ContentCss’:’内容样式’,
‘button’:’submit,cancel’,//默认两个按钮..可以单独设置其中的一个
});
参数都可选.
w就是窗体的对象.
w.close();//关闭窗体
w.setContent(‘内容’);//设置内容
w.getObject();//获取窗体对象
w.load(‘加载连接’,’回调函数’);//加载一个url
静态对话框与模态对话框使用方法相同.

原文出处:http://www.imsiren.com/archives/340