Home > Web Front-end > JS Tutorial > body text

jQuery creates page mask layer effect

php中世界最好的语言
Release: 2018-04-19 15:19:21
Original
2271 people have browsed it

This time I will bring you jQuery to create the page mask layer effect. What are the precautions for jQuery to create the page mask layer effect. The following is a practical case, let’s take a look.

<!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>遮罩层</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>
    <!--页面上原先没有的内容(用来执行点击后生成的提示框)-->
    <p class="personsex" style="display: none;">
      <p>保密</p>
      <p>男</p>
      <p>女</p>
    </p>
  </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('<p class="loading-shade"></p>');
      //$(".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元素)的时候实现遮罩层消失。)
//   $('#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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of jQuery's prev()

jquery ajax implements asynchronous submission of form data

jQuery implements icon display and hiding switching

Use jQuery to implement front-end search

The above is the detailed content of jQuery creates page mask layer effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!