网页点击弹出遮罩窗口(可关闭)

最新推荐文章于 2024-10-14 23:40:45 发布

diaochourou0502

最新推荐文章于 2024-10-14 23:40:45 发布

阅读量177

点赞数

文章标签： python javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/hm21/archive/2012/09/20/2694768.html

版权

xhtml

<body>
<span id="boxs"></span>
<a href="javascript:boxs(1);">点这里测试一下</a>
</body>

CSS

<style>
*{ padding:0; margin:0; font-size:12px;}
/*这里将所有HTML标签的padding和marging以及font属性全部统一*/
#bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=50); width:100%; height:100%;position:absolute; top:0; left:0}
/*这里是黑色背景的样式，半透明；而且用是绝对定位，用top和left可以让他在窗口中的最顶和最左；其它详细说明见注释1*/
#info{height:0px; width:0px;top:50%; left:50%;position:absolute;  line-height:1.7}
/*这个是用来定位用的；也是用绝对定位；他其实就是定位一个点用的，这个点位于窗口的正中间；*/
#center{background:#fff;border:1px solid #217AC1; width:300px; height:100px; position:absolute; margin:-50px -150px;}
/*这个是用来显示提示信息用了；背景是白色，边框为一个像素的蓝色；是用的相对于#info的绝对定位；详细见注释2*/
#center strong{ display:block; padding:2px 5px; background:#EBF4FC; color:#519FEE;}
/*这里就简单了，这行是提示信息“友情提醒”这几个字；我让它加粗，又给加了个背景和色彩；这个没有什么*/
#center p{padding:10px; text-align:center; color:#1C6FB8;}
/*这里就简单了不说了*/
</style>

注释1：前透明在IE中只能用IE的私有属性filter:alpha；而在FIREFOX中只能用-moz-opacity；OPERA现在只能用图片来作；我这里没有作；所以这个效果在OPEAR中不是半透明的；应该是黑色的；
注释2：这里最主要的功能是计算位置用的；如果这块宽度是300px；高为100PX的话；那么想要完全居中，就只能margin:-50px -150px; 50是100PX/2 ; 150是300PX/2 ；这个地方我没有办法作成自动适应高度和宽度了；

JavaScript

<script>
function boxs(v){
    window.scrollTo(0,0);//到页面的顶部
    var bo = document.getElementsByTagName('body')[0];
    var ht = document.getElementsByTagName('html')[0];
    var boht = document.getElementById('boxs');                
    boht.innerHTML = '';
    bo.style.height='auto';
    bo.style.overflow='auto';
    ht.style.height='auto';    
    if(v == 1){            
        bo.style.height='100%';
        bo.style.overflow='hidden';
        ht.style.height='100%';        
        boht.innerHTML = '<div id="bg"></div><div id="info"><div id="center"><strong>友情提醒：</strong><p><a href="javascript:boxs(0);">关了我吧！</a></p></div></div>';            
    }
}    
</script>