2013-12-26 4 views
0

Я пытался реализовать некоторый javascript с модулем twitter bootstrap, который отлично работает на jsFiddle, но не работает на моем сайте.Javascript не работает с twitter bootstrap modal

HTML:

<a href="#Modal1" class="link-glow" data-toggle="modal">link</a> 

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <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> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body" id="modalBody"></div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Javascript:

$('#Modal1').on('show', function() { 
    $('#modalBody').html('<iframe width="560" height="315" src="//www.youtube.com/embed/8LCiz7OpfnQ?list=PLVL8S3lUHf0SxTfeIL55AGkEAd2zVPPbl" frameborder="0" allowfullscreen></iframe>'); 
}).on('hide', function() { 
    $('#modalBody').html(''); 
}); 

Может кто-нибудь, пожалуйста, помогите мне понять, что проблема? Большое спасибо!

+0

ли вы включить bootstrap.js на вашей странице? – Fals

+0

проверить наличие ошибок в консоли браузера – charlietfl

+0

Вы видите ошибки в консоли? и вы включили jquery, прежде чем включить bs? – PSL

ответ

0

В соответствии с документами Bootstrap события, которые вы хотите использовать, - show.bs.modal и hide.bs.modal.

См http://getbootstrap.com/javascript/#modals-usage

Так что ваш код будет:

$('#Modal1').on('show.bs.modal', function(event) {...}).on('hide.bs.modal', function(event) {...}) 
+1

Спасибо, Дерек, не понимал, что я смотрю на старые документы. –

Смежные вопросы