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>
  • 相关阅读:
    volatile关键字,使一个变量在多个线程间可见。
    grep sed awk
    mysql高级聚合
    Hive高级聚合GROUPING SETS,ROLLUP以及CUBE
    用SecureCRT来上传和下载文件
    mysql导出导入数据
    redis入门
    spark 常用技巧总结2
    生成数据库字典
    spark 常用技巧总结
  • 原文地址:https://www.cnblogs.com/dreamflycc/p/3057038.html
Copyright © 2011-2022 走看看