Question

我正在使用twitter bootstrap模式对话框。它工作正常，只用

打开它

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

但是当我尝试像

这样的东西时

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

我收到了一个javascript错误：

bootstrap模态不是函数

此外。据我所知，与.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

在jQuery.noConflict()内添加$(document).ready(function(){})也可以提供帮助。

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

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

Answer 6

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

'规则'是你模态的id吗？因为我们只能将.modal方法用于具有'modal'类的div。

你给了那个

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

这很好用，你可以使用'my-modal'id作为模态。

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会以某种方式与bootstrap模式弹出窗口冲突。

Answer 8

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

我在脚本中添加了引用，并解决了该问题。

bootstrap模态不是一个函数

8 个答案: