js控制div弹出层实现方法
本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下：
这是个功能很好，且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口(可拖动，背景灰色透明)</title>
<script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><input type='text' name='typename' size='20'/></td></tr><tr><th></th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><button style='line-height:normal;' type='submit' onclick='return submitform()'>确定</button> <button style='line-height:normal;' type='reset'>取消</button></td></tr></table></form>";
//弹出窗口设置
msgw = 300; //窗口宽度
msgh = 150; //窗口高度
msgbg = "#FFF"; //内容背景
msgcolor = "#000"; //内容颜色
bordercolor = "#000"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369"; //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建标题
var thObj = document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
var ie = document.all;
var nn6 = document.getElementById&&!document.all;
var isdrag = false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="DragAble") {
isdrag = true;
oDragObj = oDragHandle.parentNode;
nTY = parseInt(oDragObj.style.top);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
//-->
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr >
<td height="100" align="center" >
<p><a href="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
使用js实现关闭js弹出层的窗口
<script type="text/javascript">function toggle() { theObj = document.getElementById('Sunyanzi').style; if ( theObj.display == "none" ) theObj.display = "block"; else theObj.display = "none";}</script>
-
使用原生JS实现弹出层特效
创建遮罩层 复制代码 代码如下: _createCover: function() { var newMask = document.createElement("div"); newMask.id = this._mark; newMask.style.position = "absolute"; newMask.style.zIndex = "100"; _scrollWidth =
-
JS简单实现动画弹出层效果
JS简单实现动画弹出层效果 <!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> <title>动画弹出层&l
-
js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查看效果 源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码. 为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效
-
js与css实现弹出层覆盖整个页面的方法
本文实例讲述了js与css实现弹出层覆盖整个页面的方法.分享给大家供大家参考.具体实现方法如下: 弹出层透明背景加框的常用样式和结构如下: 复制代码 代码如下: .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-
-
js实现div弹出层的方法
本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /* * 弹出DIV层 */ function showDiv() { var Idiv = document.getElementById("Idiv&quo
-
原生js实现弹出层效果
知识要点 1.遮罩层的宽度和高度是js获取页面的宽高(页面内容) //获取遮罩层(内容)的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; 2.登录框设置静止定位fixed 3.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 //获取login的宽度和高度并设置偏移值 var dHeight=oLogin.offsetHeight
-
Js Jquery创建一个弹出层可加载一个页面
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
js控制div弹出层实现方法
本文实例讲述了js控制div弹出层实现方法.分享给大家供大家参考.具体分析如下: 这是个功能很好,且容易调用和控制的弹出层.感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口(可拖动,背景灰色透明)</title&g
-
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
-
JS+CSS实现带关闭按钮DIV弹出窗口的方法
本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> <script> function locking(){ document.all.ly.style.display="block"; document.all.ly.sty
-
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
如下所示: 这种弹出层在ajax执行完添加房间的动作后在回调里写 var index = parent.layer.getFrameIndex(window.name); setTimeout(function(){parent.layer.close(index)}, 1000); 1秒后,当前窗口就会关闭了 以上这篇layer弹出的iframe层在执行完毕后关闭当前弹出层的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
昨天layer插件弹出层关闭问题弄的我直挠头,短短几行代码,用了我将近2个钟头才解决.我的使用场景是这样.在页面中用layer.open弹出一个层,在层内是微信支付二维码,客户扫码支付.支付成功后关闭此弹出层,并提示项目投递成功,然后再跳转到其他页面.为了监控微信二维码扫码支付是否成功.我利用了每隔三秒,查询下支付订单,查看支付订单的支付状态是否改变.在实际操作中由于使用的是location.href做跳转,然而跳转执行的非常慢,要10几秒才能成功,这不能忍.只能退而求其次,只是提示投递成功,然
-
div弹出层的ajax登录(Jquery版+c#)
页面初始化,界面如图所示: Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码): 可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢! 加载列表如下图所示: 可以随意地点击添加到Server name中,登录时截图所示: 文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了 demo.html(全部前台代码,js/css
-
js写一个弹出层并锁屏效果实现代码
复制代码 代码如下: <!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=&qu
-
DIV+CSS+JS 变灰弹出层
浮动层居中的对话框效果演示 浮动层居中的对话框效果演示 HTML { HEIGHT: 100% } BODY { HEIGHT: 100% } BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif } DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; P
-
jQuery+html5实现div弹出层并遮罩背景
渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&