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>
*/

posted @ 2008-06-23 10:11  山里人家  阅读(2257)  评论(4编辑  收藏  举报