Bootstrap modal не является функцией

Я использую twitter bootstrap modal dialog. И он отлично работает, только открывая его с помощью

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a>

Но когда я пытаюсь что-то вроде

$('#close_popup').click(function(){
    $('#rules').modal('toggle');    
});

Я получаю ошибку javascript:

bootstrap modal не является функцией

Более того. Насколько я понимаю, ссылка с .close должна закрывать окно, а это не так. Что я делаю неправильно?

Ответы

Ответ 1

Я не знаю, поняли ли вы эту проблему или нет, было пару месяцев назад, когда вы задали этот вопрос, но я столкнулся с той же проблемой, и это связано с конфликтом с другим плагином, поэтому Я отправлю решение для будущих запросов.

Вот пример того, что я сделал, чтобы обойти эту проблему.

function ShowImageInModal(path) {
    jQuery.noConflict();
    (function ($) {
        $('#modalImage').removeAttr("src").attr("src", path);
        $('#myModal').modal('show');
    }
    )(jQuery);
}

Ответ 2

возможно конфликт пространства имен, просто сделайте это...

jQuery(document).ready(function($) {
    $('#myModal').modal('toggle');
});

Ответ 3

Убедитесь, что вы не загружаете несколько файлов jquery из нескольких локальных или локальных локальных адресов.

Ответ 4

Добавить jQuery.noConflict() внутри $(document).ready(function(){}) тоже может помочь.

$(document).ready(function(){
   jQuery.noConflict();
});

Ответ 5

Один из самых кратких способов избежать этих конфликтов:

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery(function($){
// Your jQuery code here, using the $
});
</script>

как показано на рисунке:

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Ответ 6

 $('#rules').modal('toggle');

Являются ли "правила" идентификатором вашего модального? потому что мы можем использовать .modal методы только с div, который имеет "модальный" класс.

и вы указали, что

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a>

это работает нормально, и в этом вы используете "my-modal" id для модального.

Ответ 7

Я решил эту проблему, удалив следующий код:

<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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Feed Selection</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" id="feedsave" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Что означает, что bootbox каким-то образом конфликтует с модным всплывающим окном bootstrap.