Закрытие Bootstrap Модальное окно закрывает всплывающее окно, которое находится за пределами модального окна - PullRequest
Новая
       27

Закрытие Bootstrap Модальное окно закрывает всплывающее окно, которое находится за пределами модального окна

0 голосов
/ 07 июня 2018

В моем HTML я использовал popover, чтобы открыть окно чата.Из окна чата я открываю модальное окно.Я использовал bootstrap (3.3) + пропеллер.

Когда я закрываю модальное окно, оно также закрывает всплывающее окно, на котором было показано модальное окно.

Но я просто хочу скрыть модальное окно, и 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>

1 Ответ

0 голосов
/ 07 июня 2018

Это работает для меня.Пожалуйста, сравните это с моим примером, чтобы увидеть, что вы могли пропустить. 

<!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>
...