how to open a modal (bootstrap) using jQuery?

Question

This is my modal

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

and JQuery

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

The error coming is

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

What's the problem? And is working with a button like this

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

Answer 1

Checout out some of the points ..

1. First check if you have added the bootstrap library.

2. if added , than check if you have include jQuery before including bootstrap's javascript.Since bootstrap actually needs jQuery.

3. Check if you included library more than Once

For example

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

and do this:

$(window).load(function() {

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

If it does not work even now.. than remove your jquery and and bootstrap library and use bootstrap 3.3.5 and jquery 1.11.3.

Answer 2

Bootstrap css plugin:

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

Plugin:

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

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

</script>

Try this...