js 弹出对话框(遮罩)透明,可拖动的简单实例

时间：2021-05-26

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 onclick="sAlert('登陆成功！')" value=登陆><p align=center><select><option>---</option></select></p></body></html><html><head><script>var dragapproved=falsevar minrestore=0 //该变量表示窗口目前的状态，0表示初始化状态，1表示最大化状态var initialwidth,initialheight//若Client浏览器为IE5.0以上版本的var ie5=document.all&&document.getElementById//若Client浏览器为NetsCape6。0版本以上的var ns6=document.getElementById&&!document.allfunction 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.clientXoffsety=ie5? event.clientY : e.clientYdocument.getElementById("dwindowcontent").style.display="none" //此句代码可不要tempx=parseInt(document.getElementById("dwindow").style.left)tempy=parseInt(document.getElementById("dwindow").style.top)dragapproved=truedocument.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 windowdocument.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 windowdocument.getElementById("maxname").setAttribute("src","layout.png")document.getElementById("dwindow").style.width=initialwidthdocument.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" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false"><div align="right" style="background-color:navy"><img src="layout.png" id="maxname" onClick="maximize()"><img src="icon_delete.gif" onClick="closeit()"></div><div id="dwindowcontent" style="height:100%"></div></div><input type="button" value="弹出窗口" onclick='loadwindow(300,200);'></body></html>

以上这篇js 弹出对话框(遮罩)透明,可拖动的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章