js弹出层

js:

View Code 
 1 <script language="JavaScript" type="text/javascript">
 2      function showWindow() {
 3 
 4          mask = document.createElement("div");
 5          var W = $(document).width();
 6          var H = $(document).height();
 7          mask.id = "mask";
 8          mask.style.cssText = "position:absolute;z-index:5;width:" + W + "px;height:" + H + "px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
 9          document.body.appendChild(mask);
10          var o = document.getElementById("edit");
11          o.style.display = "block";
12          o.style.top = "253px";
13          o.style.left = "400px";
14      }
15      function closeWindow() {
16          var mask = document.getElementById("mask");
17          mask.style.display = "none";
18          var o = document.getElementById("edit");
19          o.style.display = "none";
20      }
21  </script>

div:

View Code 
<div id="edit" style="display:none;position:absolute;z-index:100; border:solid 1px #79BCFF; background-color: #EEF2FB;  width:400px;height:200px;">
      <table id="table1"  width="400" cellpadding="0" cellspacing="0">
        <tr bgcolor="#A0D0F5">
        <td>
        <span style="float:right;margin-top:5px;"><a onclick="closeWindow();" style="cursor: pointer;float:right;">[关闭]</a></span>
        </td>
        </tr>
        <tr>
            <td>
                <div style="width:400px;height:180px; overflow-y:auto ; overflow-x:hidden ;" >
                   <ul>
                        <li style="list-style-type:none; width:140px;float:left;">项目1</li>
                       <li style="list-style-type:none; width:140px;float:left;">项目2</li>
                       <li style="list-style-type:none; width:140px;float:left;">项目3</li>
                        <li style="list-style-type:none; width:140px;float:left;">项目4</li>
                        <li style="list-style-type:none; width:140px;float:left;">项目5</li>
                        <li style="list-style-type:none; width:140px;float:left;">项目6</li>
                    </ul>
                </div>
            </td>
        </tr>
      </table>
</div>

 

View Code 
1      <div >    
2       <a href="javascript:showWindow()">点击</a>
3      </div>

 

posted @ 2013-05-03 17:15  dreamfly_cc  阅读(163)  评论(0)  编辑  收藏  举报