zoukankan      html  css  js  c++  java
  • 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;" + 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;  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="400px;height:180px; overflow-y:auto ; overflow-x:hidden ;" >
                       <ul>
                            <li style="list-style-type:none; 140px;float:left;">项目1</li>
                           <li style="list-style-type:none; 140px;float:left;">项目2</li>
                           <li style="list-style-type:none; 140px;float:left;">项目3</li>
                            <li style="list-style-type:none; 140px;float:left;">项目4</li>
                            <li style="list-style-type:none; 140px;float:left;">项目5</li>
                            <li style="list-style-type:none; 140px;float:left;">项目6</li>
                        </ul>
                    </div>
                </td>
            </tr>
          </table>
    </div>
    View Code
    1      <div >    
    2       <a href="javascript:showWindow()">点击</a>
    3      </div>
  • 相关阅读:
    BZOJ 1726: [Usaco2006 Nov]Roadblocks第二短路
    BZOJ 1708: [Usaco2007 Oct]Money奶牛的硬币
    BZOJ 1642: [Usaco2007 Nov]Milking Time 挤奶时间
    BZOJ 1611: [Usaco2008 Feb]Meteor Shower流星雨
    BZOJ 1610: [Usaco2008 Feb]Line连线游戏
    BZOJ 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐
    BZOJ 1607: [Usaco2008 Dec]Patting Heads 轻拍牛头
    BZOJ 1606: [Usaco2008 Dec]Hay For Sale 购买干草
    BZOJ 1083: [SCOI2005]繁忙的都市
    STL set的用法
  • 原文地址:https://www.cnblogs.com/dreamflycc/p/3057038.html
Copyright © 2011-2022 走看看