Question

这是我的模态

<div class="modal hide fade" id="loader">  
              <div class="modal-dialog">
                  <div class="modal-content" style="margin-top:240px;">
                      <div class="modal-body">     
                          <input  type="range" id="loaderd"   min="-50" max="0">
                      </div>     
                  </div>
              </div>
           </div>

和JQuery

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

错误来了

Uncaught TypeError: $(...).modal is not a function  @ ssss.js:546onclick @ ssss.htm:1

有什么问题？并且正在使用像这样的按钮

<img id="volumeClickedMiniPlayer" src="img/volume.png"  width="25px" height="25px" data-toggle="modal" data-target="#loader">

Answer 1

清除一些要点......

1. 首先检查是否添加了引导程序库。

2。如果添加，则检查是否包含jQuery之前包括bootstrap的javascript。因为bootstrap实际上需要jQuery。

3. 检查您是否包含多于一次的库

例如

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>

并执行此操作：

$(window).load(function() {

jQuery.noConflict();
    $('#loader').modal('show');
});

如果它现在不起作用，请删除你的jquery和bootstrap库并使用 bootstrap 3.3.5和jquery 1.11.3 。

Answer 2

Bootstrap css插件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

HTML：

<div class="modal" id="loader">  
          <div class="modal-dialog">
              <div class="modal-content" style="margin-top:240px;">
                  <div class="modal-body">     
                      <input  type="range" id="loaderd"   min="-50" max="0">
                  </div>     
              </div>
          </div>

插件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

脚本：

<script>
$(document).ready(function(){
    $('#loader').modal('show');
});

</script>

试试这个......

Answer 3

如果您已正确添加所有外部文件，您需要删除hide类

<div id="loader" class="modal hide fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" style="margin-top:240px;">
      <div class="modal-body">
        <input type="range" id="loaderd" min="-50" max="0">
      </div>
    </div>
  </div>
</div>

的JavaScript

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

With Hide Class demo

Without hide class demo

如何使用jQuery打开模态（bootstrap）？

3 个答案: