使用jQuery实现元素的显示隐藏

实现思路：通过jQuery的点击事件，对元素使用show( )、hide( )方法实现；也可以直接通过改变元素css样式实现。

1、首先得有个html结构的文件

 <div class="tel">安全公告</div>
    <!-- 弹窗 -->
    <div class="mask">
      <h4>注意事项</h4>
      <p>
        1、注意电安全。不要乱动电器、乱接电线等，不要在标有高压危险的地方游荡。<br />
        2、注意水安全。不要到河边、水井等危险的地方玩耍。<br />
      </p>
      <div class="xz">
        <button type="button" id="no">取消</button>
        <button type="button" id="yes">同意</button>
      </div>
    </div>

2、然后设置元素的相关样式使其看起来美观

   <style>
      .tel {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #e53d30;
        color: #fff;
        cursor: pointer;
      }
      .mask {
        width: 1000px;
        height: 800px;
        border: 1px solid #000;
        padding-left: 10px;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        display: none;
        z-index: 999;
      }
      .xz {
        position: absolute;
        bottom: 50px;
        left: 365px;
        width: 300px;
        height: 35px;
      }
      .xz button {
        width: 80px;
        height: 35px;
        border: none;
        color: #fff;
        cursor: pointer;
      }
      #no {
        background-color: #6e6c6c;
        float: left;
      }
      #yes {
        background-color: #e64c34;
        float: right;
      }
      p {
        text-align: left;
        line-height: 30px;
      }
   </style>

3、最后对操作的元素设置事件即可

注意：使用以下方式的提前是已经引入jQuery文件

 <script>
      $(".tel").click(function () {
        $(".mask").show();
        $(".tel").hide();
      });
      // 取消按钮
      $("#no").click(function () {
      // $(".mask").hide();
        $(".mask").css("display", "none");
      });
      //   确定按钮
      $("#yes").click(function () {
        $(".mask").hide();
        // 跳转到指定页面
        window.location.href = "http://index.html";
      });
  </script>