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在最顶层显示----弹出框效果相关推荐

Linux程序实现弹框,jQuery实现弹出框效果绝对美观
使用到JQeury写的几个比较好的Popup DialogBox,觉得不错.和大家分享下.使用它们结合.net可以实现很好的效果. 1.jqpopup: 是个可以拖拽,缩放并可以在它上面显示html页 ...
android 蒙版图片带拖动_Android实现蒙版弹出框效果
本文实例为大家分享了android蒙版弹出框效果的具体代码,供大家参考,具体内容如下自定义 package cn.lxsdb.yyd.app.dialog; import cn.lxsdb.yyd. ...
php jquery 弹窗提示框,jQuery实现消息弹出框效果
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下效果图实现代码 .showMessage { padding: 5px 10px; border-radius: 5p ...
[JS]JS模拟Alert弹出框效果--自定义CSS样式
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0; ...
类似智联招聘选择职位的弹出框效果，可做选择城市等信息
在这里贴出主要代码,可在我的资源中下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
axure 点击按钮弹出框_Axure动态面板教程：弹出框效果的制作
作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件--Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成 ...
模仿qq头像上传的弹出框效果
1.涉及到知识点,如下: 1.1.自定义对话框 1.2.动画 1.3.样式选择器 1.4.shape的使用 2.代码编写 2.1首先创建选择照片的弹出对话框的布局文件,代码如下: headicon_c ...
uniapp底部弹出框效果
<template><view><view class="one-right" @click="sell"><text ...
IOS8中SWIFT 弹出框的显示
弹出框不管是在网页端,还是在手机APP端,都是常用的控件.在网页中实现个简单的弹出框只需要调用alert,在IOS中,也不是那么复杂,也是容易使用的. 我先用xcode6创建一个名为iOS8Swift ...

div在最顶层显示----弹出框效果

div在最顶层显示----弹出框效果相关推荐

最新文章

热门文章