JS弹出层[用CSS来定位不同弹出层]
2011-08-28 02:39
323 查看
<!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弹出层(用CSS来定位不同弹出层)</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 />
一直为JS弹出层的定位问题头疼，现在不用愁了，不同的弹出层可以用CSS来定位，不用在JS给每个弹出层都定同样的位置。<br />
<br />
<a href="http://www.abaonet.com/">阿宝工作室 - 专注网页设计与制作</a> <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 = "阿宝工作室 - 专注网页设计与制作";
var url_sito = "http://www.abaonet.com";
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt
(navigator.appVersion) >= 4))
window.external.AddFavorite(url_sito, nome_sito);
else if (navigator.appName == "Netscape")
window.sidebar.addPanel(nome_sito, url_sito, '');
else
alert("Sorry!Cann't Add this site to your favorite!.");
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>另一个JS弹出层(用CSS来定位不同弹出层)</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 />
一直为JS弹出层的定位问题头疼，现在不用愁了，不同的弹出层可以用CSS来定位，不用在JS给每个弹出层都定同样的位置。<br />
<br />
<a href="http://www.abaonet.com/">阿宝工作室 - 专注网页设计与制作</a> <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 = "阿宝工作室 - 专注网页设计与制作";
var url_sito = "http://www.abaonet.com";
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt
(navigator.appVersion) >= 4))
window.external.AddFavorite(url_sito, nome_sito);
else if (navigator.appName == "Netscape")
window.sidebar.addPanel(nome_sito, url_sito, '');
else
alert("Sorry!Cann't Add this site to your favorite!.");
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 站点改进心得--CSS、JS在不同浏览器的兼容性问题 - []
- 用js实现根据不同的分辨率和浏览器调用不同的css文件
- 鼠标滑过文字弹出一段说明文字CSS实现，不通过JS实现
- Laravel 如何在Blade模板中能够根据不同的子页面附加不同的js和CSS
- JS+CSS实现实用的单击输入框弹出选择框的方法
- css js 在不同浏览器兼容性问题总结
- DotNetNuke(DNN)皮肤制作-通过JS文件解决不同IE版本对CSS解释不一致的问题
- 解决Windows和Linux使用npm打包js和css文件不同的问题
- css+html+js实现下拉及多级弹出菜单
- css实现对背景图片的定位，获得一张图片上不同位置的内容
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- 几款纯div+css制作的弹出菜单标准且无js
- js 根据屏幕大小调用不同的css文件
- 用 js和css弹出层
- Wordpress不同页面判断加载头部JS CSS等文件
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- js调用css的问题,适应不同浏览器对ID的调用方法
- IE和FireFox(FF)中js和css的不同
- div+css制作的弹出菜单(标准且无js)
- Js 根据不同浏览器弹出窗口