jQuery はページ マスク レイヤー効果を作成します

今回は、jQuery を使用してページ マスク レイヤー エフェクトを作成する方法を説明します。jQuery でページ マスク レイヤー エフェクトを作成する際の 注意事項 は何ですか?実際の事例を見てみましょう。

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <meta>
    <meta>
    <title>遮罩层</title>
    <style>
      .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>
  
  
    <!--页面上原先有的内容（用来执行点击）-->
    <section>
         <span>性别</span>
        <span>男</span>
    </section>
    <!--页面上原先没有的内容（用来执行点击后生成的提示框）-->
    <p>
      </p><p>保密</p>
      <p>男</p>
      <p>女</p>
    
  
  <script></script>
  <script>
    //添加页面遮罩
    function addShade() {
      var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
      $("body").append(&#39;<p class="loading-shade">&#39;);
      //$(".loading-shade").css("height",htmlHeight+"px");
      $(".loading-shade").css("100%");
    }/*删除页面遮罩*/
    function removeShade() {
      $(".loading-shade").remove();
    }
    /*页面遮罩点击关闭弹出层
     * dom=>#id
     * type => hide || remove
     * */
    function closep(dom, type) {
      $(".loading-shade").click(function() {
        type == "hide" ? $(dom).hide() : $(dom).remove();
        $(".loading-shade").remove();
      })
    }
    //需要调用的页面添加的js（这里是点击上边的p(即：.personsex p元素)的时候实现遮罩层消失。）
//   $(&#39;#sexlog,#personsex&#39;).unbind("click").bind("click",function(){
//      addShade();
//      $(&#39;.personsex&#39;).show();
//   });
//
//   $(&#39;.personsex p&#39;).bind(&#39;click&#39;,function(){
//      $(&#39;.loading-shade&#39;).remove();
//      $(&#39;.personsex&#39;).hide();
//   });
    //======================================================================================
    //需要调用的页面添加的js（这里是点击遮罩层实现遮罩层（即：.loading-shade）页面关闭）
     $(&#39;#sexlog,#personsex&#39;).unbind("click").bind("click",function(){
       addShade();
       $(&#39;.personsex&#39;).show();
       del();
    });
    function del(){
       $(&#39;.loading-shade&#39;).bind(&#39;click&#39;,function(){
         $(&#39;.loading-shade&#39;).remove();
         $(&#39;.personsex&#39;).hide();
      });
    }
  </script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQueryのprev()の使い方を詳しく解説

jquery+ajaxでフォームデータの非同期送信を実装

jQueryでアイコンの表示/非表示切り替えを実装

jQuery を使用してフロントエンド検索を実装する

以上がjQuery はページ マスク レイヤー効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。