js 弹出对话框(遮罩)透明,可拖动的简单实例
<html> <head> <script> function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.style.width = "100%"; //window.alert(document.body.scrollHeight); shield.style.height = document.body.scrollHeight+"px"; shield.style.background = "white"; shield.style.textAlign = "center"; shield.style.zIndex = "10000"; shield.style.filter = "alpha(opacity=80)"; shield.style.opacity = 0.8; //shield.style.border-width=thick; strHtml = "<input type="button" value=" 确 定 " id="do_OK" onclick="doOk()" />n"; shield.innerHTML = strHtml; document.body.appendChild(shield); this.doOk = function(){ document.body.removeChild(shield); } document.getElementById("do_OK").focus(); } </script> </head> <body > <input type=button value=登陆> <p align=center><select><option>---</option></select></p> </body> </html>
<html> <head> <script> var dragapproved=false var minrestore=0 //该变量表示窗口目前的状态，0表示初始化状态，1表示最大化状态 var initialwidth,initialheight //若Client浏览器为IE5.0以上版本的 var ie5=document.all&&document.getElementById //若Client浏览器为NetsCape6。0版本以上的 var ns6=document.getElementById&&!document.all function iecompattest(){ return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function drag_drop(e){ if (ie5&&dragapproved&&event.button==1){ document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px" document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px" } else if (ns6&&dragapproved){ document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px" document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px" } } function initializedrag(e){ offsetx=ie5? event.clientX : e.clientX offsety=ie5? event.clientY : e.clientY document.getElementById("dwindowcontent").style.display="none" //此句代码可不要 tempx=parseInt(document.getElementById("dwindow").style.left) tempy=parseInt(document.getElementById("dwindow").style.top) dragapproved=true document.getElementById("dwindow").onmousemove=drag_drop } function loadwindow(width,height){ if (!ie5&&!ns6) //若不为IE或Netscpae浏览器，则使用一般的Window.open进行弹出窗口处理 //window.open(url,"","width=width,height=height,scrollbars=1") { } else{ document.getElementById("dwindow").style.display=''; document.getElementById("dwindow").style.width=initialwidth=width+"px"; document.getElementById("dwindow").style.height=initialheight=height+"px"; document.getElementById("dwindow").style.left="300px"; document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"; //document.getElementById("cframe").src=url } } function maximize(){ if (minrestore==0){ minrestore=1 //maximize window document.getElementById("maxname").setAttribute("src","layout.png") document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px" document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px" } else{ minrestore=0 //restore window document.getElementById("maxname").setAttribute("src","layout.png") document.getElementById("dwindow").style.width=initialwidth document.getElementById("dwindow").style.height=initialheight } document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px" document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px" } function closeit(){ document.getElementById("dwindow").style.display="none" } function stopdrag(){ dragapproved=false; document.getElementById("dwindow").onmousemove=null; document.getElementById("dwindowcontent").style.display="" //extra } </script> </head> <body> <div id="dwindow" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false"> <div align="right"> <img src="layout.png" id="maxname"> <img src="icon_delete.gif"></div> <div id="dwindowcontent"> </div> </div> <input type="button" value="弹出窗口" onclick='loadwindow(300,200);'> </body> </html>
以上这篇js 弹出对话框(遮罩)透明,可拖动的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。