引导模式不是函数答案

【问题标题】：bootstrap modal is not a function引导模式不是函数
【发布时间】：2011-12-21 07:22:42
【问题描述】：

我正在使用 twitter 引导模式对话框。它工作正常，只用打开它

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

但是当我尝试类似的东西时

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

我收到一个 javascript 错误：

引导模式不是函数

此外。据我了解，与.close 的链接必须关闭窗口，但它不会。我做错了什么？

【问题讨论】：

你是否包含了 bootstrap-modal.js ？
确定我做了，否则弹出窗口根本不起作用

标签： twitter-bootstrap

【解决方案1】：

我不知道你在几个月前问这个问题时是否发现了这个问题，但我遇到了同样的问题，它与另一个插件的冲突有关，所以我将发布解决方案以供将来查询。

这是我为解决此问题所做的一个示例。

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

【讨论】：

对此+1。我只需要在 $('#myModal').modal('show') 之前添加 jQuery.noConflict()，谢谢。
可以用@conor确认；调用 .modal('show') 之前的 jQuery.noConflict() 修复了 Chrome 和 Firefox 中的问题并摆脱了丑陋的解决方法
@Etch 非常感谢，在该行之前添加 JQuery.noConflict() 也对我有用。
您好，我遇到了同样的问题，我在调用模态之前添加了 jQuery.noConflict()，但是当我调用模态时，jquery 自动完成插件不起作用。

【解决方案2】：

可能是命名空间冲突，只需这样做...

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

【讨论】：

【解决方案3】：

确保您没有从多个位置（本地或远程）加载多个 jquery 文件。

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

在$(document).ready(function(){}) 中添加jQuery.noConflict() 也有帮助。

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

【讨论】：

【解决方案6】：

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

'rules' 是你的模态的 id 吗？因为我们只能将 .modal 方法与具有 'modal' 类的 div 一起使用。

你给了那个

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

这工作正常，在此您已使用“我的模态”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 modal popup 有某种冲突。

【讨论】：

【解决方案8】：

我没有在 html 的 head 标记中加载 bootstrap.js.min。

我添加了对脚本的引用并解决了问题。

【讨论】：