I'm trying to bind an some code to trigger when my modal is opened. I have no trouble opening the modal but for some reason i can't figur out my event doesn't triggered.

Here is my modal

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
            </div>
                <div class="modal-body">
            <p id="modal-body" class="text-defualt text- text-normal text-left"></p>
        </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

And here is my JS script i'm trying to get to run

<script>
    $(function(){ // let all dom elements are loaded
      $("#details").on("show.bs.modal", function (e) {
          alert("event fired");
      });
    })
</script>'

I'm using bootstrap 3.3 and jQuery v1.11.2

Let me know if any more info would help solve the issue Thanks in advance

I'm trying to bind an some code to trigger when my modal is opened. I have no trouble opening the modal but for some reason i can't figur out my event doesn't triggered.

Here is my modal

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
            </div>
                <div class="modal-body">
            <p id="modal-body" class="text-defualt text- text-normal text-left"></p>
        </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

And here is my JS script i'm trying to get to run

<script>
    $(function(){ // let all dom elements are loaded
      $("#details").on("show.bs.modal", function (e) {
          alert("event fired");
      });
    })
</script>'

I'm using bootstrap 3.3 and jQuery v1.11.2

Let me know if any more info would help solve the issue Thanks in advance

• javascript
• jquery
• twitter-bootstrap
• bootstrap-modal

• 1 Your modal isn't visible, hence the show.bs.modal event never fires. If you show the modal, it works fine: jsfiddle/u1pdunkf – Rory McCrossan Commented Aug 23, 2017 at 8:12

3 Answers 3

Please try below code: Assuming you are opening modal popup on click of any button; add below code, it should work: Refer this fiddle

 <script>
    $(function(){ // let all dom elements are loaded
     $(document).on('show.bs.modal','#details', function () {
        alert('hi');
      });
    });
</script>

Your code fires the modal and the alert. Did you remember to include JQuery?

Try this CodePen Demo

<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#details">
  Launch demo modal
</button>

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p id="modal-body" class="text-defualt text- text-normal text-left">I work</p>
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  $(function() {
    $("#details").on("show.bs.modal", function(e) {
      alert("event fired");
    });
  });
</script>

Here you go with a solution https://jsfiddle/kxr2subr/

$(function(){ // let all dom elements are loaded
  $("#details").on("show.bs.modal", function (e) {
      alert("event fired");
  });
  
  $('button').click(function(){
  	$('#details').modal({show: true});
  });
});

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button>
Open Modal
</button>

<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
            </div>
                <div class="modal-body">
            <p id="modal-body" class="text-defualt text- text-normal text-left"></p>
        </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

I guess you are missing bootstrap.min.js file.