jQuery實現的頁面遮罩層功能示例【測試可用】

2019-11-19 15:10:12

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的頁面遮罩層功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <meta name="description" content="aportpower"/>    <title>www.survivalescaperooms.com 遮罩層</title>    <style type="text/css">      .fh-link-bar {        border-top: none;      }      .fh-link-bar {        background-color: #fff;        border: 1px solid #eaeaea;        border-left: none;        border-right: none;        padding: 10px;        height: 50px;        line-height: 30px;        font-size: 14px;      }      #personsex{        float: right;      }      .personsex {        background: magenta;        width: 150px;        height: 180px;        line-height: 40px;        text-align: center;        border-radius: 2px;        z-index: 104;  /*層級關系為104*/        /*只是用來控制位置的*/        position: absolute;        margin: 100px auto;        font-size: 20px;        left: 0;        right: 0;        top: 0;        bottom: 0;      }      /*一定要記得添加樣式（必須）*/      .loading-shade {        position: fixed;  /*窗口定位*/        background: rgba(0,0,0,.5);  /*遮罩層的顏色*/        z-index: 102;      /*層級關系為102*/      }      .loading-shade{        height: 100%;        width: 100%;        top: 0;        left: 0;      }    </style>  </head>  <body>    <!--頁面上原先有的內容（用來執行點擊）-->    <section class="fh-link-bar" id="sexlog">         <span>性別</span>        <span class="fh-data" id="personsex">男</span>    </section>    <!--頁面上原先沒有的內容（用來執行點擊后生成的提示框）-->    <div class="personsex" style="display: none;">      <p>保密</p>      <p>男</p>      <p>女</p>    </div>  </body>  <script src="jquery-1.7.2.min.js"></script>  <script type="text/javascript">    //添加頁面遮罩    function addShade() {      var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;      $("body").append('<div class="loading-shade"></div>');      //$(".loading-shade").css("height",htmlHeight+"px");      $(".loading-shade").css("100%");    }/*刪除頁面遮罩*/    function removeShade() {      $(".loading-shade").remove();    }    /*頁面遮罩點擊關閉彈出層     * dom=>#id     * type => hide || remove     * */    function closeDiv(dom, type) {      $(".loading-shade").click(function() {        type == "hide" ? $(dom).hide() : $(dom).remove();        $(".loading-shade").remove();      })    }    //需要調用的頁面添加的js（這里是點擊上邊的div(即：.personsex p元素)的時候實現遮罩層消失。）//   $('#sexlog,#personsex').unbind("click").bind("click",function(){//      addShade();//      $('.personsex').show();//   });////   $('.personsex p').bind('click',function(){//      $('.loading-shade').remove();//      $('.personsex').hide();//   });    //======================================================================================    //需要調用的頁面添加的js（這里是點擊遮罩層實現遮罩層（即：.loading-shade）頁面關閉）     $('#sexlog,#personsex').unbind("click").bind("click",function(){       addShade();       $('.personsex').show();       del();    });    function del(){       $('.loading-shade').bind('click',function(){         $('.loading-shade').remove();         $('.personsex').hide();      });    }  </script></html>

運行效果：