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,html,工作,css)