DIV确认对话框
/*
功能描述:主要是模拟一个JS的confirm,如果单击确定,则提交form表单;
如何取消则返回;在需要的地方引用此JS文件,并放在body中,如:
<body ><script language="JavaScript" src="AlertMsg.js"> </script> <form id="myform"></form></body>
在相应的事件中调用一个方法即可实现。alertMsgo.show(title,message,myid,width,height)几个参数分别对
应为消息框的标题,消息内容,消框确认后要提交的form的ID,消息框的宽及高度。
声 明:你可以使用也可以不用,或修改相关的属性如背景色等,在此JS中作相关的修改即可,也可以增加相关的方法,如何疑问可
与我联系(胡保林)。
*/
var formid;//全局声明; FORM的ID;
function getid(id){ return document.getElementById(id); } //取得对窗口中的某个对象;
function alertMsg()
{
//存放消息的DIV;
document.writeln("<div id=\"msgdiv\" style=\"position:absolute;display:none;border:2px solid #869cba;\"><\/div>");
//锁屏DIV
document.writeln("<div id=\"overdiv\" style=\"position:absolute;display:none;\">"); document.writeln("<\/div>");
this.show=function(title,message,myid,width,height)
{
formid=myid;
var tempobj1=getid("msgdiv");
var tempobj2=getid("overdiv");
//锁屏的透明度;
tempobj2.style.filter="alpha(opacity=30)";
tempobj2.style.MozOpacity = 30/100;
//背景色
tempobj2.style.backgroundColor = "#000000";
tempobj2.style.display = '';
tempobj2.style.zIndex= 100;
//tempobj2.style.height=screen.availHeight+"px";//屏幕的高
// tempobj2.style.width=screen.availWidth+"px";//屏幕的宽
tempobj2.style.height= "100%";//屏幕的高
tempobj2.style.width= "100%";//屏幕的宽
tempobj2.style.left=0; //左边的位置
tempobj2.style.top=0; //上面的位置;
// tempobj1.style.display="none";
//tempobj1.style.left=(document.documentElement.clientWidth)/3+"px";
//tempobj1.style.top= (document.documentElement.scrollTop+(document.documentElement.clientHeight)/3)+"px";
tempobj1.style.left="35%"; //左边的位置
tempobj1.style.top= "35%"; //上面的位置;
tempobj1.style.display= '';
tempobj1.style.width=300+"px"; //默认宽
tempobj1.style.height=130+"px"; //默认高
if(width>0) {tempobj1.style.width=width+"px"; }
if(height>0) {tempobj1.style.height=height+"px"; }
tempobj1.style.zIndex= 200;
tempobj1.style.backgroundColor = "#c2ccdf";
var OutStr;
OutStr="<div style=\"font-weight:bolder;text-align:center;text-valign:middle;height:25px;font-size:16px;background-color:#a7b9d8;cursor:move\" canmove=\"true\" forid=\"msgdiv\">"+title+"</div>"
OutStr=OutStr+"<div style=\"height:80px;text-align:center;font-size:12px;\">"+message+"</div>"
OutStr=OutStr+"<div style=\"height:25px;text-align:center;font-size:12px;\"><br><br><input type=\"button\" name=\"确认提交\" value=\"确认提交\" onclick=\"alertMsgo.onsubmit();\" /> <input type=\"button\" name=\"取消提交\" value=\"取消提交\" onclick=\"alertMsgo.closewindow();\" /></div>"
tempobj1.innerHTML=OutStr;
var md=false,mobj,ox,oy
document.onmousedown=function(ev)
{
var ev=ev||window.event;
var evt=ev.srcElement||ev.target;
if(typeof(evt.getAttribute("canmove"))=="undefined"){ return;}
if(evt.getAttribute("canmove"))
{
md = true;
mobj = document.getElementById(evt.getAttribute("forid"));
ox = mobj.offsetLeft - ev.clientX;
oy = mobj.offsetTop - ev.clientY;
}
}
document.onmouseup= function(){md=false;}
document.onmousemove= function(ev)
{
var ev=ev||window.event;
if(md)
{
mobj.style.left= (ev.clientX + ox)+"px";
mobj.style.top= (ev.clientY + oy)+"px";
}
}
}
this.closewindow=function(){
getid('msgdiv').style.display='none';
getid('overdiv').style.display='none';
}
this.onsubmit=function()//提交志愿事件;
{
getid('msgdiv').style.display='none';
getid('overdiv').style.display='none';
getid(formid).submit();
// getid(formid).click()
}
}
var alertMsgo=new alertMsg();
/*
下面的调用的方法index.htm,供参考;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body >
<script language="JavaScript" src="AlertMsg.js"> </script>
<form name="form1" id="postform" onsubmit="alert('开始提交')">
<input type="button" value="提交" onclick="alertMsgo.show('提交确认','确认提交吗?','postform',300,200)">
</form>
</body>
</html>
*/