JS弹出div和关闭

本文引用自http://www.cnblogs.com/freeliver54/archive/2008/07/03/1234768.html

//--弹出div
var parameter;
var type;
function alert_div(type,parameter)
{
 //获得鼠标当前X,Y坐标
 var x,y;
 if(!document.all)
 {
  x=pageX;
  y=pageY;
 }else{
  x=document.body.scrollLeft+event.clientX; //鼠标X轴的值
  y=document.body.scrollTop+event.clientY; //鼠标Y轴的值
 }

 //window.scrollTo(100,500);//竖向滚动条位置

 var sH = document.body.scrollHeight; //窗口的高度
 var sW = document.body.scrollWidth; //窗口的宽度
 
 var width=260 , height=90; //设置div的大小

 if((x + width) >= sW) //当鼠标点击时的x坐标的值加上div的宽度大于窗口的宽度
 {
  x = x - width;
 }

 var left=x , top=y ; //设置div的位置

 var str="";
 // 整个div的大小和位子
 str+="<div id='div1' style='z-index:1;background-color:white;position:absolute;border:2px solid slategray;left:"+left+";top:"+top+";width:"+width+";height:"+height+";'>";
 //--begin灰色top
 str+="<div style='padding-bottom:2px;background-color:slategray;width:100%;height:16px;color:white;'>";
 // 灰色div的设置
 str+=" <div style='float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;width:235;'>温馨提示</div>";
 // 灰色div右侧的按钮
 //str+=" <span style='width:14px;font-family:webdings;cursor:hand;'>0</span>"; 
 str+=" <span style='width:14px;font-family:webdings;cursor:hand;' οnclick='hide()'>r</span>";
 str+="</div>";
 //--end
 //--begin白色div
 str+="<div style=' margin:10px 5px 10px 10px;word-break:break-all;'>"; 
 // 白色div中的信息
 str+="<table cellpadding='0' cellspacing='1' border='0' class='border' align=left><form method='post' name='form_pwd' action='other.php?type="+type+"&_num="+parameter+"'><tr class='tdbg' valign='top'><td align='left'><strong>请输入密码：</strong><input name='pwd' type='password' size='20' maxlength='255' style='height:18px;'></td></tr><tr class='tdbg'><td colspan='2' align='center' valign='foot'><input type='submit' name='sub_pwd' value=' 确认 '>&nbsp;&nbsp;<input type='reset' value=' 重 置 '></td></tr></form></table>";
 str+="</div>";
 //--end
 str+="</div>"; 
 //document.write(str);
 document.body.insertAdjacentHTML("afterBegin",str);
 

}
//--关闭div
function hide()
{
 document.getElementById( "div1").style.display = "none";
}

 

一、 打造自己的alert（）对象

实现难点：

          1、利用何种方式模仿这个提示对话框？

          2、如何在弹出对话框时，使网页中其他元素不可用

思路：

         问题1：如何模仿？有API可调么？如何调呢？我比较生疏，不予采用调API；这里我选择div来制作这个效果

                div比较熟。大家有其他的好方法，请赐教。

          问题2：如何在弹出提示对话框的时候，使其他元素不可用呢？这个问题一时比较难解决。后来被人一语点醒，利用css来解决。

        OK，开工吧，其实非常简单。

      第一步，先建立一个htm文件，在里面利用js创建我们的提示对话框面板。

        htm代码省略，只贴js代码

1function Msg()

2{

3//创建弹出对话框面板

4var dvMsg = document.createElement("div");

5//设未绝对定位很重要            

6dvMsg.style.position = "absolute";

7             dvMsg.setAttribute('id','msg');

8             dvMsg.style.width = "400px";

9             dvMsg.style.height = "100px";

10             dvMsg.style.top="40%";

11             dvMsg.style.left="30%";

12             dvMsg.style.background = "white";

13             dvMsg.style.border="1px solid #6699dd";

14             dvMsg.style.zIndex = "1112";

15 //添加至body中

16             document.body.appendChild(dvMsg);

17}

OK，面板创建完毕，如果你调用该函数的话，就会发现，在页面中就会多出一个蓝色边框的块

第2步：为他添加标题栏，关闭按钮和确定按钮，以及提示图片，也是按第1步的方法做。

完毕后的代码如下。

1function Msg(str)

2//创建提示对话框面板

3 var dvMsg = document.createElement("div");

4             dvMsg.style.position = "absolute";

5             dvMsg.setAttribute('id','msg');

6             dvMsg.style.width = "400px";

7             dvMsg.style.height = "100px";

8             dvMsg.style.top="40%";

9             dvMsg.style.left="30%";

10             dvMsg.style.background = "white";

11             dvMsg.style.border="1px solid #6699dd";

12             dvMsg.style.zIndex = "1112";

13             document.body.appendChild(dvMsg);

14 //标题栏

15 var title = document.createElement("div");

16             title.style.position = "absolute";

17             title.setAttribute('id','title');

18             title.style.width = "400px";

19             title.style.height = "10px";

20             title.style.top= "0";            

21             title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=100%)";

22             title.style.zIndex = "1113";

23             title.innerHTML = "<font size='2'>提示</font>";

24             title.style.background = "#6699ff";

25

26 //提示图片

27 var imgErr = document.createElement("img");

28             imgErr.src = "pic/err.gif";

29             imgErr.style.marginLeft = "15px";

30             imgErr.style.marginTop = "30px";

31             imgErr.style.position = "absolute";

32

33 //关闭图片

34 var imgClo = document.createElement("img");

35             imgClo.src = "pic/delete.gif";

36             imgClo.style.marginLeft = "378px";

37             imgClo.style.marginTop = "0px";

38             imgClo.style.position = "absolute";

39             imgClo.style.zIndex = "1115";

40             imgClo.style.cursor = "hand";

41             imgClo.onclick = function ()

42 {

43                                 document.body.removeChild(dv);

44                                 document.body.removeChild(dvMsg);    

45                              }

46 //确定按钮

47 var btn = document.createElement("input");

48             btn.id = "ok";

49             btn.type= "button";

50             btn.value = "确   定";

51             btn.style.marginTop = "75px";

52             btn.style.marginLeft = "43%";

53             btn.style.position = "absolute";

54             btn.style.border = "1px solid #6699ff";

55             btn.style.background = "lightblue";

56 //点击关闭

57             btn.onclick = function ()

58 {

59                             document.body.removeChild(dv);

60                             document.body.removeChild(dvMsg);

61                           }

62 //响应回车              

63             btn.onkeydown = function ()

64 {

65 if (event.keyCode == "13")

66 {

67                                 document.body.removeChild(dv);

68                                 document.body.removeChild(dvMsg);

69                             }

70                           }

71 var msg = document.createElement("div");

72             msg.style.marginTop = "30px";

73             msg.style.marginLeft = "18%";

74             msg.style.position = "absolute";

75             msg.style.width = "300px";

76             msg.innerHTML = str;

77

78             msg.style.wordWrap = "break-word";

79             document.getElementById('msg').appendChild(msg);

80             document.getElementById('msg').appendChild(btn);

81             document.getElementById('msg').appendChild(imgErr);

82             document.getElementById('msg').appendChild(imgClo);

83             document.getElementById('msg').appendChild(title);         

84             document.getElementById('ok').focus();

85}

OK 现在调用这个函数，是不是我们自己的提示对话框就出来了？？

可是细心的您肯定又会发现，不对啊，window.alert弹出后，它后面的元素都不可用啊，那我们就进一步完善它吧

其实很简单，添加一个层，遮住它后面的元素就行咯。

在JS代码中添加下列代码

1/**//*

2             Copyright by:LRH http://hunanboy.cnblogs.com            

3 */

4 //确定遮罩层的高度，宽度

5 var h = screen.availHeight;

6 var w = screen.availHeight;

7 //创建遮罩层，它的主要作用就是使网页中的其他元素不可用。

8 var dv = document.createElement("div");

9             dv.setAttribute('id','bg');

10 //设置样式

11             dv.style.height = h + "px";

12             dv.style.width = w + "px";

13             dv.style.zIndex = "1111";

14             dv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=1,finishOpacity=100%)";

15             dv.style.background = "red";

16             dv.style.top = 0;

17 //设为绝对定位很重要

18             dv.style.position = "absolute";

19 //将该元素添加至body中

20             document.body.appendChild(dv);