JavaScript+DIV制造弹出警告窗口效果-JavaSript-爱易网页

JavaScript+DIV制造弹出警告窗口效果

日期：2014-05-16　浏览次数：20379 次

JavaScript+DIV制作弹出警告窗口效果

JavaScript+DIV制作弹出警告窗口效果

昨天没事，用JS+DIV制作弹出警告窗口效果。也涉及到一些CSS技术。下面是效果和源代码。欢迎大家转载。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>心林小屋Java工作室-http://hi.baidu.com/362217990</title>
    <script>
    var win;
    var body;
    var bg;
    window.onload=function(){
       win=document.getElementById("win"); //获取小窗口
       bg=document.getElementById("bg");//获取背景框
    body=document.body;//获取当前body  
     }
    
    function show(){
       document.body.scroll="no"; //隐藏当窗口的滚动条
    bg.style.width=body.clientWidth+"px"; //将背景框的宽度调到最宽
       bg.style.height=body.clientHeight+"px";//将背景框的高度调到最高
      
       win.style.display="block";//将小窗口显示
       bg.style.display="block";//将背景框显示
    }
    
    function hide(){
       document.body.scroll="auto";//当窗口的滚动条自动显示
       win.style.display="none";//将小窗口隐藏
       bg.style.display="none";//将背景框隐藏
    }

    </script>
    <style type="text/css">
    
    #win{
       position:absolute;
       border:1px solid #217AC1; 
       width: 250px;
       height: 120px;
       top:50%;
       left:50%;
    margin: -75px -110px;
       background-color: white;
       display: none;
    }
    
    #bg{
       filter:alpha(opacity=50);
       background-color: #99CCCC ;
       position: absolute;
       top:0px;
       left:0px;
       display: none;
    }
    
    
    </style>
</head>

<body>
   <span id="bg"></span>
    <div id="win">
       <div style="background-color: #EBF4FC;"><span style="color: #519FEE"> 友情提示:</span></div>
       <div align="center"><br><span onclick="hide()">关闭窗口</span></div>
    </div>
    <a onclick="show()" href="#">显示窗口</a>

   <a href="http://hi.baidu.com/362217990">TEST</a>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript+DIV制造弹出警告窗口效果

相关资料更多>

推荐阅读更多>