jQuery/Bootstrap 弹出框隐藏点击内容占位符 div 外部答案

【问题标题】：jQuery/Bootstrap popover hide clicking on outside of content placeholder divjQuery/Bootstrap 弹出框隐藏点击内容占位符 div 外部
【发布时间】：2016-10-27 03:37:14
【问题描述】：

我是新的 jQuery 和 boostrap。使用 boostrap popover 我已经为单个页面实现了多个 popover。我的 popover html 和 js 脚本如下：

  <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                    Click me 1                                           
   </a> 
   <div class="popper-content hide profile-popover">
       This content place for click me 1 button
    </div>

     <a  data-toggle="popover" class="btn popper btn-default ">                                           
         Click me 2                                           
       </a> 
   <div class="popper-content hide profile-popover">
         This content place for click me 2 button
     </div>

js 脚本：

<script>
$(document).ready(function(){
$('.popper').popover({
  placement: 'bottom',
container: 'body',
html: true,
content: function () {
    return $(this).next('.popper-content').html();
  }
 });
 });
</script>

弹出框工作正常，但现在我正在尝试实现一个脚本，如果有人在弹出框内容之外单击，它将隐藏整个页面中所有打开的弹出框。

这是我的完整代码 sn-p 请检查并告诉我，如果在内容位置之外单击，如何隐藏所有打开的弹出窗口。

$(document).ready(function(){
   $('.popper').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Popover</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover </h3>
                                 <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 1
                                           
                                 </a> 
                                   <div class="popper-content hide profile-popover">
                                             This content place for click me 1 button
                                    </div>

                                       <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 2
                                           
                                        </a> 
                                    <div class="popper-content hide profile-popover">
                                             This content place for click me 2 button
                                    </div>
 
</div>



</body>
</html>

【问题讨论】：

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

只需在您的文档 $(document).ready 函数中添加以下代码，希望您的问题能够得到解决：

$(document).mouseup(function (e) {
  if(!($(e.target).hasClass("popover-content"))){
    $(".popover").popover('hide');
    }
});

我已附上 jQuery 和 html 代码 sn-p 如下：

    $(document).ready(function(){
    $('.popper').popover({
      placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
      }
     });


    $(document).mouseup(function (e) {
          if(!($(e.target).hasClass("popover-content"))){
       		$(".popover").popover('hide');
    		}
     });




     });

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Popover</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3 class="popper-content dd">Popover </h3>
                                 <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 1
                                           
                                 </a> 
                                   <div class="popper-content hide profile-popover">
                                             This content place for click me 1 button
                                    </div>

                                       <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 2
                                           
                                        </a> 
                                    <div class="popper-content hide profile-popover">
                                             This content place for click me 2 button
                                    </div>
 
</div>

</body>
</html>

运行并检查您的问题是否解决。

【讨论】：

【解决方案2】：

首先，确保所有弹出窗口都有一个额外的类名，您可以同时定位所有这些类名。然后您可以使用此代码循环并隐藏它们。

$(document).mouseup(function (e) {
   var container = $('.popper-content');
   container.each(function() {
     if (container.is(e.target) || container.has(e.target).length === 0) {
      $(this).popover('hide');
     }
    });
 });

除非点击在容器内，否则弹出窗口将被隐藏。

【讨论】：