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>
  • 相关阅读:
    问题 A: 走出迷宫(BFS)
    问题 A: 工作团队(并查集删点操作)
    刷题-力扣-989
    刷题-力扣-12
    刷题-力扣-628
    刷题-力扣-11
    刷题-力扣-1018
    刷题-力扣-9
    刷题-力扣-7
    刷题-力扣-6
  • 原文地址:https://www.cnblogs.com/dreamflycc/p/3057038.html
Copyright © 2011-2022 走看看