Question

在我的HTML中，我使用popover打开聊天窗口。从聊天窗口我打开一个模态窗口。我使用过bootstrap（3.3）+螺旋桨。

当我关闭模态窗口时，它还会关闭已显示模态窗口的弹出窗口。

但我只是想隐藏模态窗口而popover不应该隐藏。

popover代码：

<a class="btn pmd-btn-fab btn-primary" data-trigger="click" data-toggle="popover"
    data-placement="top" data-content="<iframe  src='./chat.html?popup=1' height='700' width='400' style='border:none'></iframe>"
    data-html="true" href="javascript:void(0);">
    <span class="pmd-floating-hidden">Primary</span>
    <img src="a.png">
  </a>

模态窗口：

 <div id="fundModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content" style="height:auto;">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times; 
          </button>
          <h4 class="modal-title">Title</h4>
        </div>
        <div class="modal-body">
          <p> Hey Is it okay? </p>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>

Answer 1

它为我工作。请将它与我的例子进行比较，看看你可能错过了什么。

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
  <title>Bootstrap Example</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/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
  <div class="container">
     <a class="btn pmd-btn-fab btn-primary" data-trigger="click" data-toggle="popover"
        data-placement="bottom" data-content="<iframe  src='./chat.html?popup=1' height='700' width='400' style='border:none'></iframe>"
        data-html="true" href="javascript:void(0);">
     <span class="pmd-floating-hidden">Primary</span>
     <img src="a.png">
     </a>
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#fundModal">Open Modal</button>
     <div id="fundModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
           <!-- Modal content-->
           <div class="modal-content" style="height:auto;">
              <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times; 
                 </button>
                 <h4 class="modal-title">Title</h4>
              </div>
              <div class="modal-body">
                 <p> Hey Is it okay? </p>
              </div>
              <div class="modal-footer">
              </div>
           </div>
        </div>
     </div>
  </div>
  <script>
     $(document).ready(function(){
     $('[data-toggle="popover"]').popover(); 
     });
  </script>
   </body>
</html>

＆＃13;

关闭Bootstrap Modal窗口关闭模态窗口之外的弹出窗口

1 个答案: