Bind a function to Twitter Bootstrap Modal Close

bootstrap modal close event javascript
bootstrap modal close event not working
bootstrap modal form
bootstrap-vue modal close event
force close bootstrap modal
bootstrap modal''>close dynamically
bootstrap modal close button click event
hidden.bs.modal not working

I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can someone point it out to me or suggest a solution.

Two problems with using the documented methods

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

I attach a "hide" class to the modal already so it does not display on page load so that would load twice

even if I remove the hide class and set the element id to display:none and add console.log("THE MODAL CLOSED"); to the function above when I hit close nothing happens.

Bootstrap 3 & 4
$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2
$('#myModal').on('hidden', function () {
    // do something…
});

See getbootstrap.com/2.3.2/javascript.html#modals → Events

Capture close event on Bootstrap Modal, This is very similar to another stackoverflow article, Bind a function to Twitter Bootstrap Modal Close. Assuming you are using some version of  There’s a problem with those events: any popups in the modal (popovers, tooltips, etc) will trigger that event. There is another way to catch the event when a modal closes. $(document).on('hidden','#modal:not(.in)', function(){} ); Bootstrap uses the in class when the modal is open.

Bootstrap 4
$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

See this JSFiddle for a working example:

https://jsfiddle.net/6n7bg2c9/

See the Modal Events section of the docs here:

https://getbootstrap.com/docs/4.3/components/modal/#events

How to handle the modal closing event in Twitter Bootstrap?, modal', function () { // do something… }) Legacy Bootstrap 2.3.2 answer. Bootstrap's documentation refers two events you can use. hide: This  Bind function with Bootstrap Modal Close. Bind function with Bootstrap Modal Close : Sometimes we need to bind function with Modal close event. $(‘#modal’).on(); is used to bind a function with the close event. This method can be used to trigger the function when the close event occurs.

Starting Bootstrap 3 (edit: still the same in Bootstrap 4) there are 2 instances in which you can fire up events, being:

1. When modal "hide" event starts
$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  
2. When modal "hide" event finished
$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Ref: http://getbootstrap.com/javascript/#js-events

Modal · Bootstrap, Bootstrap modal close event - Bind a function to Bootstrap modal close event. Use hide.bs.modal event to attach function to modal close event in Bootstrap using jQuery. By: CodexWorldLast Updated: Nov 29, 2018. Share Tweet  $(document).on('hidden','#modal:not(.in)', function(){} ); Bootstrap uses the in class when the modal is open. It is very important to use the hidden event since the class in is still defined when the event hideis triggered. This solution will not work in IE8 since IE8 does not support the Jquery :not() selector.

In stead of "live" you need to use "on" event, but assign it to the document object:

Use:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

How to Bind a Function to Bootstrap Modal Close Event, Bind function with Bootstrap Modal Close - Sometimes we need to bind function with Modal close event. $('#modal').on(); is used to bind a  I am trying to fully bind twitter bootstrap modal with knockout. By fully bind I mean that I want every close interaction with modal dialog to work with knockout. I have seen some of the questions, which partially bind them (for example this one does not allow esc). I am using almost identical binding (which I actually found elsewhere)

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Bind function with Bootstrap Modal Close | Jquery, "Hide.bs.modal" event. This event is fired just before the modal is hidden. j'utilise le Bootstrap lib de Twitter sur un nouveau projet et je veux une partie de la page pour rafraîchir et récupérer les dernières données json sur modal close. Je ne le vois nulle part dans la documentation.quelqu'un peut me le montrer ou me proposer une solution. Deux problèmes avec l'utilisation des méthodes documentées

Bootstrap Modal Events, I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. Twitter Bootstrap Modal. Twitter Bootstrap provides a very nice looking modal component. However, using the simple $.fn.modal jQuery plugin directly from a Knockout view model can result in DOM code creeping in where it doesn't belong. The Bootstrap modal plugin requires there to be an element in the page which it will display as a modal dialog.

Bind function to Twitter Bootstrap Modal Close, Bootstrap 3 and 4. $('#myModal').on('hidden.bs.modal', function () { // do something… }); Bootstrap 3: getbootstrap.com/javascript/#modals-events. Bootstrap 4:  Bind modal data to knockout model. I'm trying to have a twitter bootstrap modal open to a window that has a text area in it which is editable, then on save, it saves the appropriate data.

Bind a function to Twitter Bootstrap Modal Close - jquery, I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this  Here we are going to create a function which will create delete confirmation using bootstrap modal. Steps to create Confirm Delete Modal Prompt. Step 1 : Create Button. Create Delete Button and bind the modal popup Event. Now call a function which will open a modal asking confirmation. Pass Id(Or other data you wish) to the function as below-

Comments
  • This seems to work except, for some reason, when hovering over a button in the modal footer it also fires. The button is a regular submit button: <input type="submit" class="btn btn-info" value="Go" /> Any idea how to not have the hide event fire when hovering over it? Or, how I can detect that it was fired because of the hover? BTW: even though the event is fired the modal dialog doesn't close.
  • I'm not seeing this behaviour with Bootstrap 3, can you make a fiddle?
  • This answer should probably mention the difference between hidden.bs.modal and hide.bs.modal. Hidden is fired when the CSS animations complete, but in my testing if there are no animations, it never fires (could just be a bug though). If you're working with data management, it could be safer to use hide.bs.modal instead, which is fired as soon as .modal('hide') is called. getbootstrap.com/javascript/#modals-usage - See Events subsection.
  • Bootstrap 3: It works when I click on a modal tag marked as data-dismiss="modal" (like a close button), but it does not work when I click on the black background area surrounding the modal. The modal is dismissed but then it can't be reopened until the page is refreshed. I've tried both 'hidden.bs.modal' and 'hide.bs.modal' to no avail.
  • @marquito What you can do (what I do) is use it like this: $('#myModal').modal({ backdrop: 'static', keyboard: false }); That way, the modal won't close when click on grey area, nor when pressing Esc key.
  • For anyone that finds this post looking to implement this type of callback, there is an extension module to Bootstrap that includes this functionality as well as a lot of other helpful functions for dynamically creating dialogs/alerts/confirmations: bootboxjs.com
  • @Ricardo Lima's response below is now the correct method for monitoring events in jQuery/bootstrap
  • @meatballs still an up vote for the working example..even though bind has been deprecated.
  • @100acrewood Dude, now that's a find! Thank you! re: bootboxjs.com
  • This helped me fix my Bootstrap modal bug where it would add 15px of padding-right to the body on close of any modal. Thanks!
  • Good for showing the 2 events. Better for beginners like me to note that this needs to be placed below the modal for the event to be fired.
  • This is how you must do it if the modal is added dynamically. Saved me a ton of time.
  • This way is also valid for BS3. Please see accepted answer for BS2 (deprecated) way.
  • Indeed. It's good that you mentioned that it needs to be placed at below the modal to fire the event.