引导 $('#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>

bootstrap 库被应用到第一个 jquery 库，但是当你重新加载 jquery 库时，原始的 bootstrap 加载会丢失（Modal 函数在 bootstrap 中）。

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

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

3.请检查modal的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. 模态<div> 的ID 不正确。 （例如：您错误地在<div> 的ID 中添加了#）
7. Jquery 选择器中缺少# 符号

Answer 4

我在使用 Modal Popup Bootstrap 时遇到了同样的问题，我使用 Id 并触发点击事件来显示和隐藏模式弹出窗口，而不是 $("#Id").modal('show') 和 $("#id" ).modal('隐藏'), `

    <button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
    $('#btnPurchaseClose').trigger('click');// for close popup

     $('#btnOpenPurchase').trigger('click');`// for open popup

Answer 5

我的根本原因是我忘记在 id 名称前添加 #。蹩脚但真实。

来自

$('scheduleModal').modal('show');

到

$('#scheduleModal').modal('show');

供您参考，适合我的代码序列是

<script>
function scheduleRequest() {
        $('#scheduleModal').modal('show');
    }
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">  
</script>
<script
    src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>

Answer 6

使用.modal({show:true}) 和.modal({show:false}) 而不是('show') 和('hide') ...它似乎依赖于引导/ jquery 版本组合。希望能帮助到你。

Answer 7

'bootstrap modal is not opening'的解决方法是，把你的Jquery CDN放在head标签的前面（在head标签之后）。

我浪费了两天时间才发现这个问题。

Answer 8

请

尝试检查触发按钮是否具有属性 type="button"。 工作示例：

  <button type="button" id="trigger" style="visibility:visible;" onclick="modal_btn_click()">Trigger Modal Click</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

   <script >
           function modal_btn_click() {

               $('#myModal').modal({ show: true });
           }
   </script>

Answer 9

不带参数试试这个

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

应该可以了

Answer 10

你确定模态框的 id 是“myModal”吗？如果不是，则调用不会触发它。

另外——仅仅通过阅读你的帖子——你正在用这个按钮触发一个功能/验证

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

然后如果一切顺利 - 你想触发模态。 - 如果是这种情况 - 那么您应该从此按钮单击中删除切换。我想您有一个与此点击相关的事件处理程序？您需要 .modal("show") 作为该功能的一部分。未从此按钮切换。还有 - 这个 id 是正确的“creatNewAcount”而不是这个拼写“createNewAccount”

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

Answer 11

使用对象调用...

<a href="#" onclick='$("#myModal").modal("show");'>Try This</a>

或者，如果您使用 ajax 在获取结果后显示该模式，这对我有用...

$.ajax({ url: "YourUrl",
type: "POST", data: "x=1&y=2&z=3",
cache: false, success: function(result){
        // Your Function here
        $("#myModal").modal("show");
    }
});

Answer 12

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

第一个 googleapis 脚本现在无法运行，请使用 jquery 提供的第二个脚本

Answer 13

必须先加载 jQuery 库。就我而言，我首先加载引导库，还尝试使用目标标记并触发点击触发器。但主要问题是 - 必须先加载 jquery。

Answer 14

还请确保模态 div 嵌套在您的 <body> 元素中。

Answer 15

在为我的问题尝试了网络上的所有内容后，我需要在脚本中添加一小段延迟，然后再尝试加载该框。

即使我已将加载框的行放在整个脚本的最后一行。我只是使用了 500 毫秒的延迟

setTimeout(() => {  $('#modalID').modal('show'); }, 500);

希望将来能对某人有所帮助。 100% 同意这是可能的，因为我不了解我的脚本流程和加载顺序。但这就是我解决它的方式

Answer 16

就我而言，bootstrap.css 和 bootstrap.js 版本不匹配。 如果我删除淡入淡出类，它就可以工作。但是背景消失了。 我添加了相同版本的引导文件。现在它运行良好。 谢谢@Mohammed Shareef C。