Javascript模仿弹出确认对话框

2013-09-063lian10 的分享   加三联MM小编微信好友:sanlian2018

 这样的一个通用窗口..

代码如下

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
静态对话框与模态对话框使用方法相同.

TA发布的帖子

881

收藏

605