Bootstrap $('#myModal').modal('show')不起作用

Question

我不确定为什么,但所有的模态功能都不适用于我.我检查了它们的版本和负载.

我一直收到此错误消息:

Uncaught TypeError: $(...).modal is not a function

为了隐藏我已经找到了另一种选择.代替:

$('#myModal').modal('hide');

我用过这个:

$('#myModal .close').click();

而且效果很好.

现在的问题在于节目

$('#myModal').modal("show");

我也试过了

$('#myModal').modal("toggle");

和:

$('#myModal').modal();

但不幸的是,他们都没有工作.

这里的html代码 - 当点击按钮时,我会做一些验证并处理来自Web服务的json数据,如果成功,那么我想要显示我的模态 - 一切都在工作,除了节目.

 <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

如果有任何替代方案我想知道.

Answer 1

这类问题最常见的原因是

1.如果您不止一次定义了jquery库.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="modal fade" id="myModal" aria-hidden="true">
    ...
    ...
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

引导程序库应用于第一个jquery库,但是当您重新加载jquery库时,原始引导加载会丢失(模式函数在引导程序中).

2.请将您的JavaScript代码包装在里面

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

3.请检查模态的id是否相同

作为您为组件定义的那个(同时检查相同ID的重复).

Answer 2

<div class="modal fade" id="myModal" aria-hidden="true">
   ...
   ...
</div>

注意： 从 div 中删除淡入淡出类并享受它应该工作

Answer 3

发生这种情况有以下几个原因：

1. 您忘记在文档中包含 Jquery 库
2. 您在文档中多次包含 Jquery 库
3. 您忘记在文档中包含 bootstrap.js 库
4. 您的 Javascript 和 Bootstrap 的版本不匹配。请参阅引导程序文档以确保版本匹配
5. 模态<div>缺少modal类
6. 模态的 id<div>不正确。（例如：您错误地#在 id 前面加上了<div>）
7. #Jquery 选择器中缺少符号