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

问题描述 投票：14回答：12

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

我一直收到此错误消息：

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>

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

javascript jquery bootstrap-modal
12个回答
38
投票

这类问题最常见的原因是

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

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给出的第二个scripe

0
投票

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

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>
2
投票

我在使用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
2
投票

这可能由于以下几个原因而发生：

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

我的根本原因是我忘了在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>
1
投票

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

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

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

0
投票

试试这个没有参数

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

它应该工作

0
投票

你确定模态的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>
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");
    }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.