zoukankan      html  css  js  c++  java
  • JQuery-遮罩层

    HTML

    <html>
      <head>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
        <script src="Jquery.js" type="text/javascript"></script>
        <script src="JavaScript.js" type="text/javascript"></script>
      </head>
      <title>Title</title>
      <body>
        <div id="bodydiv">
          <input type="button" id="buttonshow" value="显示" />
          <div id="divpopup">
            <input type="button" id="buttonclose" value="关闭"/>
          </div>
          <div id="divcover">
          </div>
        </div>
      </body>
    </html>

    JS(JavaScript.js)

    $(function(){
      $("#buttonshow").click(function(){
        $("#divcover").css("height",$(document).height());
        $("#divcover,#divpopup").show(1000).css("display","block");
        $("#buttonshow").hide(1000);
        $("#buttonclose").click(function(){
          $("#divcover,#divpopup").hide(1000);
          $("#buttonshow").show(1000);
        });
      });
    });

    CSS(StyleSheet.css)

    #divpopup
    {
      display:none;
      position:fixed;
      z-index:1002;
    }
    #divcover
    {
       100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background-color: Gray;
      position: absolute;
      display: none;
      z-index: 1001;
      opacity:0.50;
    }

    源码下载:http://files.cnblogs.com/zisezhixin/遮罩层.zip

  • 相关阅读:
    如何判断哪个方法调用了相同的事件?
    Windows Update问题
    Android学习笔记
    关于官方Reachability Demo理解
    poj 1797 Heavy Transportation
    poj 3013 Big Christmas Tree
    poj 1062 昂贵的聘礼
    poj 3615 Cow Hurdles(floyd)
    CF Planets(STL+ 最短路)
    poj 3026 Borg Maze
  • 原文地址:https://www.cnblogs.com/zisezhixin/p/4188603.html
Copyright © 2011-2022 走看看