CODEWITHSUNDEEP
jquerytwitter-bootstrap
Group
Group

Reputation: 335

how to open a modal (bootstrap) using jQuery?

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

Upvotes: 3

Views: 11295

Answers (3)

Raviteja
Raviteja

Reputation: 3479

If you have added all external files correctly then, You need to remove hide class

<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

Upvotes: 1

Deepak Devadiga
Deepak Devadiga

Reputation: 66

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

Upvotes: 3

Amar Singh
Amar Singh

Reputation: 5622

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.

Upvotes: 5

Related Questions