div在最顶层显示----弹出框效果
生活随笔
收集整理的這篇文章主要介紹了
div在最顶层显示----弹出框效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
div顯示在最頂層,并且背景層變暗.
效果圖如下:
代碼:html文件內容如下:? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="coverDiv.js"></script></head> <body οnlοad="drag();"><div><input type="button" οnclick="popSignFlow();" value="login"/> </div></body></html>
coverDiv.js文件內容如下:
?
function isIE(){return (document.all && window.ActiveXObject && !window.opera) ? true : false;}var loginDivWidth = 300;var sign_in_flow = '<div style="background:#FF9900;">Login</div><div>e-mail:*</div><div>'+ '<input type="text" id="sign_email" maxlength="64" size="30"/>'+ '</div><div>password:*</div><div><input type="password" size="30"/>'+ '</div><div><input type="button" value="login" />??'+ '??<input type="button" value="cancel" οnclick="cancelSign();"/></div>';function cancelSign(){document.getElementById("sign_div").style.display = 'none';document.getElementById("cover_div").style.display = 'none';document.body.style.overflow = '';};function popCoverDiv(){var coverDiv = document.createElement('div');document.body.appendChild(coverDiv);with(coverDiv.style) {display = 'none';position = 'absolute';background = '#CCCCCC';left = '0px';top = '0px';var bodySize = getBodySize();width = bodySize[0] + 'px'height = bodySize[1] + 'px';zIndex = 98;if (isIE()) {filter = "Alpha(Opacity=60)";} else {opacity = 0.6;}}coverDiv.id = 'cover_div';}function getBodySize(){var bodySize = [];with(document.documentElement) {bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;}return bodySize;}function popSign(){var signDiv = document.createElement('div');document.body.appendChild(signDiv);with (signDiv.style) {display = 'none';cursor='move';position = 'absolute';left = (document.documentElement.clientWidth - loginDivWidth)/2 + 'px';top = (document.documentElement.clientHeight - 300)/2 + 'px';width = loginDivWidth + 'px';zIndex = 99;background = '#FFFFFF';border = '#66CCFF solid 1px';}signDiv.id = 'sign_div';signDiv.align = "center";document.getElementById("sign_div").innerHTML = sign_in_flow;}function popSignFlow() {document.getElementById("cover_div").style.display = 'block'; document.getElementById("sign_div").style.display = 'block'; document.body.style.overflow = "hidden";}//以下是拖拽var offsetX = 0;var offsetY = 0;var currentLeft = 0;var currentTop = 0;var isDrag = false;function stopEvent(evt){var event = window.event?window.event:evt;if (event.preventDefault) {event.preventDefault();event.stopPropagation();} else {event.returnValue = false;}}function drag(){popCoverDiv();popSign()document.getElementById('sign_div').onmousedown = function(evt){var evt = window.event?window.event:evt;if ((evt.which && evt.which == 1 ) || (evt.button && evt.button == 1)){isDrag = true;offsetX = evt.clientX;offsetY = evt.clientY;currentLeft = parseInt(document.getElementById('sign_div').style.left);currentTop = parseInt(document.getElementById('sign_div').style.top);}stopEvent(evt);} document.onmousemove = function(evt){if(isDrag){var evt = window.event?window.event:evt;document.getElementById('sign_div').style.left = evt.clientX - offsetX + currentLeft +'px';document.getElementById('sign_div').style.top = evt.clientY - offsetY + currentTop +'px';stopEvent(evt);}} document.onmouseup = function(evt){isDrag = false;var evt = window.event?window.event:evt;currentLeft = parseInt(document.getElementById('sign_div').style.left);currentTop = parseInt(document.getElementById('sign_div').style.top);stopEvent(evt);}}
轉載于:https://www.cnblogs.com/rmsSpring/archive/2012/03/29/2423646.html
總結
以上是生活随笔為你收集整理的div在最顶层显示----弹出框效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转载]读史记札记23：并不是每次跌倒都
- 下一篇： ios网络请求