trigger bootstrap modal via jquery

Question

got a problem. I am trying to trigger bootstrap modal via jquery and it doesnt work. I tried every way: way no1:

$(document).ready(function(){
    $('#btn').click(function(){
        $('#server_msg_modal').modal('show');
    });
});

way no2:

$(document).ready(function(){
    $('#btn').click(function(){
        $('#server_msg_modal').modal('show');
    });
});

way no3:

$('#server_msg_modal').modal({
    show: 'true'
}); 

nothing is working... please help me.

Solution

Your jQuery function to add the click handler to the button, and to open the modal window should both work. See the example below. I can only suggest you to take a look at for example Chrome's DevTools to see if you have any JavaScript errors in its console.

$(document).ready(function(){
  $('#btn').click(function(){
    $('#server_msg_modal').modal('show');
   });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="btn btn-danger" href="#server_msg_modal" data-toggle="modal">using data attribute</div>

<div class="btn btn-danger" id="btn">using jQuery click handler</div>


<div class="modal fade" id="server_msg_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal body</p>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Comments

[ckuijjer]

Did you include the Bootstrap JavaScript source after including jQuery?

[misha312]

yes and if i try to trigger in via html its working the html: <div class="btn-danger" href="#server_msg_modal" data-toggle="modal" id="btn">press me</div>

[Matt Fletcher]

Possible duplicate of How can I trigger a Bootstrap modal programmatically?

[misha312]

this code doesn't work for me at all.... I am using adobe dreamweaver... any idea why?

[misha312]

ok, I deleted all the code and wrote everything again and i guess it workes fine. thanks for the help