JavaScript+DIV製作彈出警告視窗效果

悠悠隱於市發表於2011-04-24
JavaScript
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>

 

相關文章