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>
  • 相关阅读:
    linux c dlopen加载动态链接库
    c++锁 测试 (gcc test.cpp -o test -lpthread)
    shell 清理目录下 超过一段时间的数据。
    大话存储学习笔记
    python总结
    正则表达式使用
    #linux shell#模拟日志生成过程
    深入理解Java虚拟机
    Nginx修改access.log日志时间格式
    mfcs100d.lib(dllmodul.obj) : error LNK2005: _DllMain@12 already defined
  • 原文地址:https://www.cnblogs.com/dreamflycc/p/3057038.html
Copyright © 2011-2022 走看看