Maison > Article > interface Web > Comment obtenir un effet de masque en js

Comment obtenir un effet de masque en js

王林avant: 2020-04-06 09:18:352365parcourir

Analysons l'idée :

1. Surveiller les clics sur les boutons

2. Empêcher les bulles (le point le plus critique)

3. Afficher ceux masqués

4. Masquer la barre de défilement

5. Cliquez sur le document : Obtenez l'étiquette cliqué

Jugement : Masquez tout ce qui est affiché

Afficher la barre de défilement

<style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width:100%;
      height:100%;
    }
    #panel{
      width:100%;
      height:2000px;
      background-color:#000;
      opacity: 0.4;  //透明度
      filter: alpha(opacity： 40);  //用于兼容IE浏览器
      position: absolute;
      top:0;
      left:0;
      display: none;
    }
    #box{
      width:300px;
      height:300px;
      background-color: #fff;
      position: absolute;
      top:50%;
      left:50%;
      margin-left:-150px;
      margin-top:-150px;
      display: none;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button id="btn">登录</button>
  <div id="panel"></div>
  <div id="box"></div>
  <script src="js/myFunc.js"></script>
  <script>
    window.onload = function (){
      //1.监听事件的点击
      btn.onclick = function (event){

        //1.0 阻止冒泡
        if(event && event.stopPropagation){ //W3c标准
         event.stopPropagation();
        }else{ //IEx系列 IE 678
         event.cancelBubble = ture;
        }
        //1.1隐藏的显现出来
        $("box").style.display = "block";
        $("panel").style.display = "block";
        //1.2隐藏滚动条
        document.body.style.overflow = "hidden";
      }
      //2.点击文档
      document.onclick = function (event){
        var e = event || window.event;
        //2.1获取点击的标签
        var tranId = e.target ? e.target.id : e.srcElement.id;  //target:获取当前操作对象
        //2.2判断
        if(tranId !== "box"){
          //1.1显示的隐藏出来
          $("box").style.display = "none";
          $("panel").style.display = "none";
          //1.2显示滚动条
          document.body.style.overflow = "auto";
        }else{
          window.location.href = "http://www.baidu.com";
        }

      }
    }
</script>

Le point le plus important est d'empêcher les événements de bouillonner.

Obtenir l'identifiant de l'objet :

var tranId = e.target ? e.target.id : e.srcElement.id;

Tutoriels associés recommandés : Tutoriel js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JS 对象事件

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment modifier le registre en jsArticle suivant：Comment modifier le registre en js

Articles Liés

Voir plus