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();

但不幸的是，其中 none 个正在运行。

此处 html 代码 - 当单击按钮时，我将进行一些验证并处理来自网络服务的 json 数据，如果它成功，那么我想显示我的模态 - 一切正常，除了演出。

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

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

Answer 1

在没有参数的情况下试试这个

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

应该可行

Answer 2

使用对象调用...

<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 3

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

另外 - 仅通过阅读您的 post - 您正在使用此按钮触发功能/验证

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

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

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

Answer 4

此类问题最常见的原因是

1.If you have defined the jquery library more than once.

<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 加载丢失了（模态函数在bootstrap).

2.Please wrap your JavaScript code inside

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

3.Please check if the id of the modal is same

作为您为组件定义的组件（同时检查相同 ID 的重复项）。

Answer 5

<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 6

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

Answer 7

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

    <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 8

我的根本原因是我忘记在 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 9

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

Answer 10

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

您忘记在文档中包含 Jquery 库
您在文档中多次包含 Jquery 库
您忘记在文档中包含 bootstrap.js 库
您的 Javascript 和 Bootstrap 的版本不匹配。请参阅 bootstrap 文档以确保版本匹配
模态 <div> 缺少 modal class
模态 <div> 的 ID 不正确。（例如：您在 <div> 的 ID 中错误地添加了 #）
# 符号在 Jquery 选择器中丢失

Answer 11

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

注意： 从 div 中删除 fade class 并享受它应该工作

Answer 12

拜托，

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

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

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

Answer 14

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

Answer 15

在为我的问题尝试了网络上的所有方法之后，我需要在尝试加载框之前向脚本添加一个小的延迟。

即使我将加载框的行放在整个脚本的最后一行。我只是使用

延迟了 500 毫秒

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

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

Answer 16

在我的例子中，bootstrap.css 和 bootstrap.js 版本不匹配。如果我删除淡入淡出 class，它就会工作。但是背景消失了。我添加了相同版本的 bootstrap 个文件。现在它运行良好。谢谢@Mohammed Shareef C.

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

Bootstrap $('#myModal').modal('show') is not working

javascript

jquery

bootstrap-modal