Jquery 实现弹出框点击自身以外的地方(遮罩层)关闭弹出框

180it 2019-09-24 AM 1216℃ 0条

前言
如果想直接测试看效果,源码放在了文章的最后面,关键地方都有注释

应用场景:有一个按钮,点击弹出一个弹框,里面被放置一些内容,点击弹框本身弹框是不会被关闭的,但是点击弹框以为的遮罩层弹框就会被关闭

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq点击自身以为关闭弹出窗</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js";></script>
<style>

* {
  margin: 0;
  padding: 0
}

#branch {
  width: 100%;
  height: auto;
}

/* 按钮 */
#branch .branch-header button {
  margin: 300px 600px;
}

/* 弹出框 */
#branch .branch-proup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  border-radius: 5px 5px 0 0;
}

#branch .branch-proup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  border: 1px solid #ccc;
  margin-top: -160px;
  margin-left: -160px;
  background-color: #fff;
  border-radius: 5px;
}

</style>
</head>

<body>
<div id="branch">

<div class="branch-header">
  <button>点击出现弹出框</button>
</div>
<!-- 弹出框 -->
<div class="branch-proup">
  <div class="branch-proup-content">
    <!-- 弹出框内容 -->
  </div>
</div>

</div>
<script type="text/javascript">

$(function () {
  // 点击按钮
  var btn = $('#branch .branch-header button');
  // 弹出框
  var proup = $('#branch .branch-proup');

  // 点击按钮 弹窗出现
  btn.click(function () {
    proup.show();
  })

  // 点击弹窗内容以外的地方关闭弹窗
  proup.on('click', function (e) {
    if ($(e.target).closest('#branch .branch-proup-content').length > 0) {
      alert('弹出框内部被点击了');
    } else {
      alert('弹出框以外的部分被点击了');
      // 关闭弹框
      proup.hide();
    }
  });
})

</script>
</body>

</html>
————————————————

原文链接:https://blog.csdn.net/weixin_43233914/article/details/85133839

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章或资源对您有帮助,欢迎打赏作者。一路走来,感谢有您!

标签: none

Jquery 实现弹出框点击自身以外的地方(遮罩层)关闭弹出框