загрузочный модал не является функцией

Question

Я использую модальное диалоговое окно начальной загрузки Twitter. И он работает нормально, только открывая его с

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

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

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

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

модальный бутстрап не является функцией

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

<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/

Answer 5

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

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

Answer 6

У меня не было загруженного файла bootstrap.js.min в теге head в html.

Я добавил ссылку на скрипт, и это решило проблему.

Answer 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 каким-то образом конфликтует с модальным всплывающим меню начальной загрузки.

Answer 8

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

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

, и вы учли, что

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

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