Bootstrap $（'＃myModal'）。modal（'show'）不起作用

时间：2016-04-17 03:18:05

标签： javascript jquery bootstrap-modal

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

我不断收到此错误消息：

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

对于隐藏我已经找到了另一种选择。 而不是：

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

我用过这个：

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

它完美无缺。

现在问题在于节目

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

我也试过了两个

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

和

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

但不幸的是，他们都没有工作。

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

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

如果有任何替代方案，我想知道它。

16 个答案:

答案 0 :(得分：35)

此类问题的最常见原因是

  

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的重复）。

答案 1 :(得分：2)

我在使用Modal Popup Bootstrap时遇到了同样的问题，我使用Id和触发点击事件来显示和隐藏模态弹出窗口而不是$（＆＃34;＃Id＆＃34;）。modal（＆＃39; show＆＃ 39;）和$（＆＃34;＃id＆＃34;）。modal（＆＃39; hide＆＃39;）， `

    <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

答案 2 :(得分：2)

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

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

答案 3 :(得分：1)

我的根本原因是我忘记在ID名称之前添加#。 Lame但是真的。

来自

$('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>

答案 4 :(得分：1)

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

答案 5 :(得分：1)

“引导程序模式未打开”的解决方案是将jquery CDN首先放在head标签中（在head标签之后）。

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

答案 6 :(得分：0)

在没有参数的情况下尝试此操作

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

它应该工作

答案 7 :(得分：0)

使用该对象来调用... 

<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");
    }
});

答案 8 :(得分：0)

你确定模态的id是＆＃34; myModal＆＃34;？如果没有，则呼叫不会触发它。

也 - 只是阅读你的帖子 - 你用这个按钮触发功能/验证

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

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

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

答案 9 :(得分：0)

<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提供的第二个文字

答案 10 :(得分：0)

首先必须加载jQuery lib。在我的情况下，我首先加载bootstrap lib，也尝试使用target标记并触发单击触发器。但主要问题是 - 必须首先加载jquery。

答案 11 :(得分：0)

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

注意：从div中删除淡入淡出类并享受应有的作用

答案 12 :(得分：0)

请

尝试检查触发按钮是否具有属性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>

答案 13 :(得分：0)

还请确保模式div嵌套在<body>元素内。

答案 14 :(得分：0)

尝试解决网上所有问题后，我需要在脚本加载之前稍加延迟。

即使我已将代码行加载到整个脚本的最后一行中，也才将其加载。我只是用了500ms的延迟时间

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

希望对以后的人有所帮助。 100％同意这很可能是因为我不了解我的脚本流程和加载顺序。但这就是我的解决方法

答案 15 :(得分：0)

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

相关问题
最新问题