Использование Twitter Bootstrap Modal

Question

У меня скоро возникли проблемы с использованием твиттера bootstrap modal на моем сайте. На моем сайте загружен загрузочный бот, и все, кроме кнопки, не вызывает всплывающее окно, и я не знаю почему. Может кто-нибудь, пожалуйста, помогите мне?

Это модальный сразу после моего тела тега

<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Вы можете попробовать это.

$(document).ready(function() { 
    $("#btnshow").on('click', function(event) { 

    $('#myModal').modal('show'); 
    $('#myModal').on('shown', function() { 
     // do more here 
    }) 

    }); 

}); 

кнопка образец, который вызывает ваше модальное окно

<button id="btnshow">Show</button> 
<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

Bootbox.js является небольшой библиотекой JavaScript, которая позволяет создавать программные диалоговые окна, используя Bootstrap модальность, не беспокоясь о создании, управлении или удаление любого из необходимых элементов DOM или обработчиков событий JS. Вот простейший пример:

http://bootboxjs.com/examples.html

bootbox.dialog({ 
title: "That html", 
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>' 
});