Невозможно закрыть модальное окно bootstrap3 при загрузке iframe в качестве содержимого

Я использую модальный бутстрап 3.

Ниже приведен мой код.

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3>Modal header</h3>
    </div>
<div class="modal-body">
    <iframe src="remote.html"></iframe>
</div>
<div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

Теперь все работает так, как должно, за исключением случаев, когда модальный режим запускается, я не могу скрыть модальный режим (даже с помощью кнопки закрытия).

Однако, когда я использую модальное окно без iframe, модальное работает отлично.

Это съедало мое время в течение некоторого времени, было бы здорово, если бы кто-нибудь помог мне понять это.


javascript iframe twitter-bootstrap bootstrap-modal
person user2542493    schedule 17.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из ответа KayakDave здесь: https://stackoverflow.com/a/20818030/2576805

2) Добавьте некоторый jquery, который запускается при нажатии кнопки модального диалогового окна. В следующем коде ожидается назначение ссылки в атрибуте data-src и наличие у кнопки класса modalButton. И при желании вы можете указать ширину данных и высоту данных - в противном случае они по умолчанию равны 400 и 300 соответственно (конечно, вы можете легко их изменить).

Затем устанавливаются атрибуты, которые заставляют iframe загружать указанную страницу.

$('a.modalButton').on('click', function(e) {
var src = $(this).attr('data-src');
var height = $(this).attr('data-height') || 300;
var width = $(this).attr('data-width') || 400;

$("#myModal iframe").attr({'src':src,
                           'height': height,
                           'width': width});
});

3) добавьте класс и атрибуты в тег привязки модального диалога:

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

В jsFiddle, представленном внизу ответа, модальное окно можно открывать и закрывать без проблем.

person Tyler Conlee    schedule 18.06.2014