基于jquery1.3设计的弹出窗口

 

Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../jquery-1[1].3.1.min.js"></script> 
<style type="text/css"> 
* html #openWin { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
* html #hiddenLayer
{
 position: absolute;
 height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');  
}
* html #hiddenLayer_frame { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
/*  窗口 容器*/
#openWin {
     
    background:#d5dee5;
    width:200px;
    min-height:100px; 
    _height:100px;
    color:#000000;
    position:fixed;
    border:2px solid #000;
    text-align:left;
    display:none;
    padding:0px; 
      
}
/* 关闭按钮  */
#closeWinBtn  
{
 position:relative;
 float:right;
 cursor:pointer;  
 background:url(images/btnClose.gif) no-repeat 3px 3px;   
 width:25px;
 height:22px;
 border:0px;   
}
/* 透明层*/
#hiddenLayer
{
    position :fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    filter:alpha(opacity=20);       /* IE */ 
    -moz-opacity:0.2;              /* Moz + FF */ 
    opacity: 0.2;  
    background-color:black;        
    
}

/*挡住 select 控件*/
#hiddenLayer_frame{
    z-index:99;
    position:fixed;
    top: 0;
    left: 0;
    margin:0px;     
    border:none;     
    height:100%;
    width:100%;
    display:none;
}
/* 标题栏*/
#titleBox
{
  width:100%;
  height:22px;
  line-height:22px;
  text-align:left;
  border:solid 1px #ccc;   
  margin:0px;      
  background-color:#000; 
  background:url(images/win_title.png) repeat-x; 
}
#titleBox h5
{
 margin-left:5px;  
 font-size:12px;  
 font-weight:normal; 
}
/* 内容框*/
#contentBox
{
  width:190px;
  min-height:70px;
  _height:70px;
  line-height:22px;
  text-align:left;
  border:0px;   
  margin:0px;  
  padding:5px;   
  text-align:left;   
   background:url(images/warning.png) no-repeat 5px 5px; 
}
</style>
    <title></title>
    <script type="text/javascript">       
        
        function openWin() {
            //if IE 6
        if (typeof document.body.style.maxHeight === "undefined") {
            $("body", "html").css({ height: "100%", width: "100%", padding: "0px",margin:"0px"});
             $("html").css({overflow:"hidden"});
        }
        $(document.body).append("<iframe id=\"hiddenLayer_frame\"></iframe><div id=\"hiddenLayer\"></div>")
        var winBoxHtml = "<div id=\"openWin\">";
        winBoxHtml += "        <div id=\"titleBox\"><div id=\"closeWinBtn\"></div><h5></h5></div>"; //标题栏
        winBoxHtml += "        <div id=\"contentBox\"></div>";//内容框
        winBoxHtml += "   </div>";
        $(document.body).append(winBoxHtml);
        var dialogTop = Math.abs($(window).height() - 200) / 2;
        var left = ($(window).width() - 200) / 2;
        var top = (dialogTop >= 25) ? dialogTop : 25;
        var css = { left: left + "px", top: top + "px", "z-index": "999" };
        $("#openWin").css(css);
        $("#hiddenLayer").show();         
        $("#openWin").fadeIn("fast");
  /* 添加关闭事件 */
        $("#closeWinBtn").click(function() {

            $("html").css({ overflow: "" });
            $("#hiddenLayer").remove();
            $("#hiddenLayer_frame").remove();
            $("#openWin").remove();
        })
        }
      
    </script>
</head>
<body>   
 <div  style="height:1800px; width:100%; "></div>  
  <input id="Button1" type="button" value="button" onclick="openWin()" />  
</body>
</html>

 

 

posted @ 2009-03-18 15:45  koolay  阅读(749)  评论(0)    收藏  举报