Bootstrap 3.3.1 модальное всплывающее окно закрывается изнутри iframe - PullRequest
0 голосов
/ 12 апреля 2019

У меня есть iframe с помощью jQuery и начальной загрузки, и мне нужно добавить кнопку Закрыть внутри самой страницы iframe, а не из всплывающего окна, которое открывается.

Я попытался добавить <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> на всплывающей странице html, но это ничего не дает.

Вот текущий код с внешней кнопкой close и примерная ссылка на страницу на bbc.com:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://bootstrapdocs.com/v3.3.1/docs/dist/js/bootstrap.min.js"></script>
<link href="https://bootstrapdocs.com/v3.3.1/docs/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Popup page</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:0px">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
          <iframe src="https://bbc.com"  style="width:500px; height:500px;  max-width:100%; max-height:100%" frameborder="0" allowtransparency="true"></iframe>  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Я нашел этот пост , но не уверен, как реализовать его в текущем случае.

1 Ответ

0 голосов
/ 12 апреля 2019

Вы можете просто добавить кнопку, подобную этой, и добавить в iframe некоторый идентификатор 'затемнение'.

<button type="button" class="btn btn-default" onclick="window.jQuery('#blackout').toggle('slow');">Open/Close</button>
...