Не може да се затвори модалът на bootstrap3 при зареждане на iframe като съдържание

Използвам модален bootstrap 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="/bg#" class="btn">Close</a>
    <a href="/bg#" 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. И по избор можете да посочите data-width и data-height - в противен случай те са по подразбиране съответно 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