CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
Christian Schröder
Christian Schröder

Reputation: 37

Bootstrap modal jquery hidden does not work

I have a problem with my modal.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

button:

<button type="button" class="btn btn-primary" data-toggle="modal" 
 data-target="#mdProduction">production</button>

modal:

<div id="mdProduction" class="modal fade" role="dialog" >
   <div class="modal-dialog" style="width:45%;">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">production</h4>
         </div>
         <div class="modal-body">
           some content
         </div>
      </div>
   </div>
</div>

jquery:

$('#mdProduction').on('hidden.bs.modal', function () {
 alert("Hello World!");
})

But i don't get any alert. I also tried "window.alert", but it doesn't work neither.

This is just an example. What I want is to trigger a function, when the modal gets hidden.

Thanks for your answers.

Upvotes: 0

Views: 450

Answers (2)

Quentin Roger
Quentin Roger

Reputation: 6538

The event your are using is working well :

$('#mdProduction').on('hidden.bs.modal', function() {
  alert("Hello World!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="modal fade" id="mdProduction" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        <p>This is a small modal.</p>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#mdProduction">Open Small Modal</button>

I think the problem comes from the way you are opening the dialog. Can you share the code where you try to open the dialog ?

Upvotes: 1

meditari
meditari

Reputation: 141

Your html is incorrect I believe. It should be:

<div id="mdProduction" class="modal fade">
   <div class="modal-dialog">
        <div class="modal-content">
            some information
        </div>
    </div>
</div>

Upvotes: 0

Related Questions