弹窗和遮罩层的显示隐藏及空白区域关闭

Posted 2021-02-15 renzm0318

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹窗和遮罩层的显示隐藏及空白区域关闭相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Commpatible" content="IE=edge">
    <title>HTML遮罩层</title>
    <style>
        body{
            background: aqua;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.6;
            display: none;
        }
        .dialog{
            display: none;
            position: relative;
            width: 200px;
            height: 200px;
            background: lightcoral;
        }
        .btn{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 40px;
            left: 200px;
            background: #c1f088;
        }
    </style>
</head>
<body>
 <div class="shade"></div>
 <div class="wrap">
    弹窗展示
 </div>
  <div class="dialog">
      <div class="content">内容区</div>
      <div class="btn">按钮</div>
</div>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
 <script>
     // 弹窗显示
     $(‘.wrap‘).click(function () {
         $(‘.shade‘).show()
         $(‘.dialog‘).show()
     })
     // 点击关闭按钮，弹窗隐藏
    $(‘.btn‘).click(function () {
        $(‘.shade‘).hide()
        $(‘.dialog‘).hide()
    })
     // 点击空白区域，弹窗隐藏
     $(document).mouseup(function(e){
         var _con = $(‘.dialog ‘);   // 设置目标区域
         // 点击事件的对象不是目标区域本身
         // 事件对象不是目标区域的子元素
         if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
             console.log(e)
             console.log(e.target)
             $(‘.shade‘).hide()
             $(‘.dialog‘).hide()
         }
     });

 </script>
</body>
</html>

以上是关于弹窗和遮罩层的显示隐藏及空白区域关闭的主要内容，如果未能解决你的问题，请参考以下文章

使用js实现简单放大镜的效果

jquery 点击标题弹出内容和遮罩层后，点击关闭按钮怎么关闭

pc端点击弹出弹出框以及遮罩层的时候页面右侧出现空白区域，使得页面整体左移一下

隐藏弹窗的情况（办法很笨拙）

easyUI弹框被遮罩层遮挡