|
|
【提示】本版本在IE 6.0和Firefox2.0测试通过。在Netscape7.0中，遮罩层的透明效果没有办法实现，所以页面背景会一片漆黑，具体实现还不知道，希望有人可以留言告知，谢谢！ 【关键字】javascript js confirm对话框 确认框 焦点在取消按钮上 自定义标题 【正文】在一次使用confirm确认框时希望将焦点默认在取消按钮上，但是默认的confirm对话框无法自定义，于是便萌生了自己写一个类似confirm的确认框。 【思路】主要应该实现的功能： 1、弹出对话框时，网页主体不可以继续执行其他操作 2、confirm确认框可以自定义焦点 3、点击确认后应该执行指定确认函数，点击取消不进行任何操作 实现办法： 1、使用遮罩层的方法，将页面主体覆盖，这样就可以保证不可进行其他操作 2、使用DIV层模拟对话框主体，使用focus()函数设置焦点 3、具体实现中要注意： a)遮罩层应该遮住页面主体的所有元素 b)模拟确认框的DIV应该在遮罩层之上并且最好可以一直在页面正中间 以下是自定义confirm对话框使用的抓图效果，实际使用中还可以作为alert对话框来使用。 【使用提示】 BODY处必须写成<body onload="load_func()">样式，这里是使用onload来加载默认的函数，load_func()用来设置onresize和onscroll应该触发的函数，这个触发的函数主要用来保证遮罩层覆盖所有网页正文以及保证自定义对话框可以保持在网页的正中间。 【主函数】 1、msgbox(title,text,func,cancel,focus) 参数说明：
title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常
text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
例如上面抓图的调用方式为： <input type="button" onclick="msgbox('确认删除么?','【注意】<font color=red>删除后无法恢复数据</font>,点击确认执行删除操作,点击取消不再执行操作!','alert(\'执行了删除操作!\')',1,1)" value="删除数据"> 具体说就是：msgbox('标题','内容','点击确认应执行的函数','是否显示取消按钮','焦点位置'); 【JS代码分析】
/*
本Js代码用于创建一个自定义的确认窗口,
具体功能包括:自定义窗口标题,自定义窗口内容,是否显示取消按钮,焦点位置设定
Author:Jedliu
Blog :Jedliu.cublog.cn
【网页转载请保留版权信息,实际使用时可以除去该信息】
*/
function get_width(){
return (document.body.clientWidth+document.body.scrollLeft);
}
function get_height(){
return (document.body.clientHeight+document.body.scrollTop);
}
function get_left(w){
var bw=document.body.clientWidth;
var bh=document.body.clientHeight;
w=parseFloat(w);
return (bw/2-w/2+document.body.scrollLeft);
}
function get_top(h){
var bw=document.body.clientWidth;
var bh=document.body.clientHeight;
h=parseFloat(h);
return (bh/2-h/2+document.body.scrollTop);
}
function create_mask(){//创建遮罩层的函数
var mask=document.createElement("div");
mask.id="mask";
mask.style.position="absolute";
mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置
mask.style.opacity=0.4;//Mozilla的不透明设置
mask.style.background="black";
mask.style.top="0px";
mask.style.left="0px";
mask.style.width=get_width();
mask.style.height=get_height();
mask.style.zIndex=1000;
document.body.appendChild(mask);
}
function create_msgbox(w,h,t){//创建弹出对话框的函数
var box=document.createElement("div") ;
box.id="msgbox";
box.style.position="absolute";
box.style.width=w;
box.style.height=h;
box.style.overflow="visible";
box.innerHTML=t;
box.style.zIndex=1001;
document.body.appendChild(box);
re_pos();
}
function re_mask(){
/*
更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容
*/
var mask=document.getElementById("mask") ;
if(null==mask)return;
mask.style.width=get_width()+"px";
mask.style.height=get_height()+"px";
}
function re_pos(){
/*
更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
*/
var box=document.getElementById("msgbox");
if(null!=box){
var w=box.style.width;
var h=box.style.height;
box.style.left=get_left(w)+"px";
box.style.top=get_top(h)+"px";
}
}
function remove(){
/*
清除遮罩层以及弹出的对话框
*/
var mask=document.getElementById("mask");
var msgbox=document.getElementById("msgbox");
if(null==mask&&null==msgbox)return;
document.body.removeChild(mask);
document.body.removeChild(msgbox);
}
function msgbox(title,text,func,cancel,focus){
/*
参数列表说明:
title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常
text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
Author:Jedliu
Blog :Jedliu.cublog.cn
【网页转载请保留版权信息,实际使用时可以除去该信息】
*/
create_mask();
var temp="<table width=\"355\" height=\"127\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"font:14px Verdana, Geneva, Arial, Helvetica, sans-serif\">";
temp+="<tr><td background=\"msgbox/alert_01.gif\" width=\"355\" height=\"22\" style=\"padding-left:8px;padding-top:2px;font-weight: bold;color:white;\">"+title+"</td></tr>";
temp+="<tr><td background=\"msgbox/alert_02.gif\" width=\"355\" height=\"75\" style=\"padding-left:6px;padding-right:2px;padding-bottom:10px;\"> <img src=\"msgbox/alert_mark.gif\"> "+text+"</td>";
temp+="</tr><tr><td width=\"355\" height=\"22\" align=\"center\" background=\"msgbox/alert_03.gif\"><input name=\"msgconfirmb\" type=\"button\" id=\"msgconfirmb\" value=\"确认\" onclick=\"remove();"+func+";\">";
if(null!=cancel){temp+=" <input name=\"msgcancelb\" type=\"button\" id=\"msgcancelb\" value=\"取消\" onclick=\"remove();\"></td>";}
temp+="</tr><tr><td background=\"msgbox/alert_04.gif\" width=\"355\" height=\"8\"></td></tr></table>";
create_msgbox(400,200,temp);
if(focus==0||focus=="0"||null==focus){document.getElementById("msgconfirmb").focus();}
else if(focus==1||focus=="1"){document.getElementById("msgcancelb").focus();}
}
function re_show(){
/*
重新显示遮罩层以及弹出窗口元素
*/
re_pos();
re_mask();
}
function load_func(){
/*
加载函数,覆盖window的onresize和onscroll函数
*/
window.onresize=re_show;
window.onscroll=re_show;
}
下载源代码：
js自定义confirm对话框.rar
(11.35 KB, 下载次数: 5402)
原文地址：http://www.51xflash.com/website/javascript/200811/22-5998.html |
|
发表于 2012-5-28 22:32:17