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>
  • 相关阅读:
    网站被刷导致404解决
    vim常用
    curl, wget常用选项
    使用paramiko远程登录并执行命令脚本
    批量监测dns是否可用脚本,不可用时并切换
    shell脚本收集服务器基本信息并入库
    沃通SSL证书及国密SSL证书入驻百度云市场
    电子合同,相比纸质合同有哪些好处?
    DV型域名https证书的优点及申请流程
    Chrome 浏览器显示“网站连接不安全”,是什么原因?
  • 原文地址:https://www.cnblogs.com/dreamflycc/p/3057038.html
Copyright © 2011-2022 走看看