实用的javascript代码控制DIV层的弹出和关闭。 //--弹出div //window.scrollTo(100,500);//竖向滚动条位置 var sH = document.body.scrollHeight; //窗口的高度 if((x + width) >= sW) //当鼠标点击时的x坐标的值加上div的宽度大于窗口的宽度 var left=x , top=y ; //设置div的位置 var str=""; }
一、 打造自己的alert（）对象 实现难点： 1、利用何种方式模仿这个提示对话框？ 2、如何在弹出对话框时，使网页中其他元素不可用 思路： 问题1：如何模仿？有API可调么？如何调呢？我比较生疏，不予采用调API；这里我选择div来制作这个效果 div比较熟。大家有其他的好方法，请赐教。 问题2：如何在弹出提示对话框的时候，使其他元素不可用呢？这个问题一时比较难解决。后来被人一语点醒，利用css来解决。 OK，开工吧，其实非常简单。 第一步，先建立一个htm文件，在里面利用js创建我们的提示对话框面板。 第一步，先建立一个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://www.csschina.net 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);
|