【子鼠】网页全屏Alert提示效果__实例+源码 MODOULPOPUP 效果

原文地址：http://www.zishu.cn/blogview.asp?logID=658

网页全屏Alert提示效果__实例+源码 [ 2007-10-17 | 作者：zishu | 来自：本站原创]

网页全屏Alert提示效果__实例+源码,记录给自已;

先看效果:

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" />
                        <title>http://www.zishu.cn</title>
                        <style>
                        /*子鼠 http://www.zishu.cn*/
                        *{ padding:0; margin:0; font-size:12px;}
                        #bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=50); width:100%; height:100%;position:absolute; top:0; left:0}
                        #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;}
                        #center strong{ display:block; padding:2px 5px; background:#EBF4FC; color:#519FEE;}
                        #center p{padding:10px; text-align:center; color:#1C6FB8;}
                        </style>
                        </head>
                        <body>
                        <span id="boxs"></span>
                        <a href="javascript:boxs(1);">点这里测试一下</a>
                        <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><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />fdsa<br /><br /><br /><br /><br /><br />fdsaf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />fsadfasd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Fsda<a href="javascript:boxs(1);">点这里测试一下</a></body>
                        </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

代码解析:

布局：

程序代码

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

这里我放了一个空的标签，ID为boxs；当我点击链接时，我希望把一些内容塞到这个ID中；而我塞的东西就是要显示的全部内容，包括半透明的黑色背景和提示信息；

CSS：

程序代码

注释1：前透明在IE中只能用IE的私有属性filter:alpha；而在FIREFOX中只能用-moz-opacity；OPERA现在只能用图片来作；我这里没有作；所以这个效果在OPEAR中不是半透明的；应该是黑色的；

注释2：这里最主要的功能是计算位置用的；如果这块宽度是300px；高为100PX的话；那么想要完全居中，就只能margin:-50px -150px; 50是100PX/2 ; 150是300PX/2 ；这个地方我没有办法作成自动适应高度和宽度了；

Javascript部分：

程序代码

这部分看上去比较麻烦；其它作的事很简单；
1、把一些内容塞到之前说的ID为boxs中；
2、设置标签html 和 body 的样式；

这里要说一下；
1、当浏览器为FIREFOX时，根本不用设置标签html 和 body 的样式；这样可以节约八行代码；你主要写成这样就可以了；

程序代码

2、当你的浏览器为IE6时；你只要设置标签body 的样式就可以了；不用设HTML标签的样式；这样可以省二行代码；

3、当你是IE7 成；只能写这个样子了；没有办法；呵呵...... 所以看上去JS会有点长；

木有办法；

这个效果基本就是这样，每次出现时都会回到网页的顶部；

如是您还对如何居中的不是很解理，可以看一下这：全屏垂直居中的一个办法 DIV+CSS

如果您想给提示效果加个阴影效果，您可以看一下这个：一个阴影半透明效果 DIV+CSS

posted on 2007-12-16 19:31 Thunderdanky 阅读(363) 评论(1) 收藏举报