JS弹出层/窗口源代码收集，很全的，很好用！ <!DOCTYPE html> 可以用鼠标拖动的JS弹出层
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的测试页面</title>
<style type="text/css">
<!--
html
{
height: {bfb};
}
body
{
margin: 0px;
padding: 0px;
height: {bfb};
}
#dt_3
{
cursor: pointer;
}
div#mbDIV
{
position: absolute;
top: 0px;
left: 0px;
width: {bfb};
height: {bfb};
background-color: #AAAAAA;
z-index: 10;
filter: alpha(opacity=80);opacity:0.8;
}
div#loginDIV
{
position: absolute;
width: 300px;
height: 150px;
background-color: #FFFF00;
z-index: 20;
}
div#loginTopDIV
{
width: {bfb};
height: 20px;
background-color: #FF0000;
cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
function show(ele)
{
eval(ele + ".style.display = ''");
}
function hidden(ele)
{
eval(ele + ".style.display = 'none'");
}
//-->
</script>
</head>
<body>
<div style="overflow: hidden;">
<h3>请点击 --> 03号拖拉机</h3>
<p id="dt_1">01号拖拉机</p>
<p id="dt_2">02号拖拉机</p>
<p id="dt_3">03号拖拉机</p>
<p id="dt_4">04号拖拉机</p>
<p id="dt_5">05号拖拉机</p>
<p id="dt_6">06号拖拉机</p>
<p id="dt_7">07号拖拉机</p>
<p id="dt_8">08号拖拉机</p>
<p id="dt_9">09号拖拉机</p>
<p id="dt_10">10号拖拉机</p>
<p id="dt_11">11号拖拉机</p>
</div>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 200px;left: 300px;display: none;">
<div id="loginTopDIV">Move</div>
<p style="text-align: center;">登陆内容在这里哦</p>
<form action="#" method="get" style="text-align: center;">
<input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" />
</form>
</div>
<script type="text/javascript">
<!--
/**
* 这里是乱七八遭信息
* */
for(var i=1;i<=11;i++)
{
eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
}
var mbDIV = document.getElementById("mbDIV");
var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");
document.getElementById("button_1").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
document.getElementById("button_2").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
dt_3.onclick = function()
{
loginDIV.style.top = "200px";
loginDIV.style.left = "300px";
show("loginDIV");
show("mbDIV")
}
/**
*这里写的是拖动信息
* */
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
//判断 top 和 left 是否超出边界
top = top < 0 ? 0 : top;
top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
left = left < 0 ? 0 : left;
left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
loginDIV.style.top = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}
//-->
</script>
</body>
</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="Content-Type" content="text/html; charset=gb2312" />
<title>JS弹出层</title>
<script language="javascript">
function BOX_show(e)//显示
{
if(document.getElementById(e)==null)
{
return ;
}
var selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++)
{
selects[i].style.visibility = "hidden";
}
BOX_layout(e);
window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置
window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置
document.onkeyup = function(event)
{
var evt = window.event || event;
var code = evt.keyCode?evt.keyCode : evt.which;
//alert(code);
if(code == 27)
{
BOX_remove(e);
}
}
}
function BOX_remove(e)//移除
{
window.onscroll = null;
window.onresize = null;
document.getElementById('BOX_overlay').style.display="none";
document.getElementById(e).style.display="none";
var selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++)
{
selects[i].style.visibility = "visible";
}
}
function BOX_layout(e)//调整位置
{
var a = document.getElementById(e);
if (document.getElementById('BOX_overlay')==null)//判断是否新建遮掩层
{
var overlay = document.createElement("div");
overlay.setAttribute('id','BOX_overlay');
//overlay.onclick=function(){BOX_remove(e);};
//a.parentNode.appendChild(overlay);
document.body.appendChild(overlay);
}
document.getElementById('BOX_overlay').ondblclick=function(){BOX_remove(e);};
//取客户端左上坐标，宽，高
var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
var clientWidth;
if (window.innerWidth)
{
clientWidth = window.innerWidth;
// clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
}
else
{
clientWidth = document.documentElement.clientWidth;
}
var clientHeight;
if (window.innerHeight)
{
clientHeight = window.innerHeight;
//clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
}
else
{
clientHeight = document.documentElement.clientHeight;
}
var bo = document.getElementById('BOX_overlay');
bo.style.left = scrollLeft+'px';
bo.style.top = scrollTop+'px';
bo.style.width = clientWidth+'px';
bo.style.height = clientHeight+'px';
bo.style.display="";
//Popup窗口定位
a.style.position = 'absolute';
a.style.zIndex=999;
a.style.display="";
//a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
//a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
}
function HiddenButton(e)
{
e.style.visibility='hidden';
e.coolcodeviousSibling.style.visibility='visible'
}
</script>
<style type="text/css">
body{}
#BOX_overlay{position: absolute;z-index: 100;top: 0px;left: 0px;background-color:#ccc;filter: alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}
</style>
</head>
<body>
<p onClick="BOX_show('messdiv')" style="cursor:pointer;">点我就出来</p>
<div id="messdiv" style="position:absolute; display:none; top:135px; left:350px; width:560px; padding:10px 20px 0; background:#f8e2a0;text-align:left; border:2px solid #5d3f0c;z-index:999; font-size:12px;">
<p style="text-align:right; margin:0; padding:0; line-height:14px; float:right;"><a href="javascript:void(0)" title="关闭" style="line-height:14px;font-size:12px; color:#333;" onclick="BOX_remove('messdiv')" target="_self">关闭</a></p>
<br /><br /><br /><br />这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br /><br /><br /><br /><br /><br /><br /><br />
<div style="width:176px;padding:0 120px;overflow:hidden;margin:10px auto 20px;">
<a title="关闭窗口" href="javascript:void(0)" onclick="BOX_remove('messdiv')" target="_self" style=" background:#fff;float:left; width:70px;height:20px;padding:5px 0 0 10px;color:#feeba9;margin-right:10px;"><span style="color:#ffd014;">关闭窗口</span></a>
<a title="收藏页面" href="javascript:void(0)" onClick="addbookmark()" target="_self" style=" background:#fff;float:left;width:70px;height:20px;padding:5px 0 0 10px;color:#feeba9;"><span style="color:#ffd014;">收藏页面</span></a>
</div>
<div style="clear:both;"></div>
</div>
<div id="BOX_overlay"></div>
<script type="text/javascript">
//添加收藏夹
function addbookmark()
{
var nome_sito = "工作室"; |
郑重声明：资讯 【JS弹出层/窗口源代码收集，很全的_猪公和猪婆的猪窝_猪公和猪婆的博客_ ...】由 发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权， 请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。
—— 相关资讯 ——
