Killing (close) a Twitter Boostrap modal, already opened?

How can i kill an already opened Bootstrap modal? jsviolín ejemplo:


        $('#myModal').on('show', function() {
            if(true) { /* Kill (close) this modal on some condition */}


He intentado:

if(true) { $('#myModal').modal('hide');   } // Not working
if(true) { $('#myModal').modal('toggle'); } // Too much recursion!!! :P
if(true) { return;                        } // Nope

preguntado el 31 de julio de 12 a las 09:07

According to the bootstrap docs, $('#myModal').modal('hide') should definitely work. If not, we won't be able to help out without having some pasted code to look through... -

@ChristianEngel jsFiddle created. Your example is not working by the way. -

Clicking on the backdrop of the modal will close the modal. You could always fire a .click event. Don't actually do this. :) -

@Marrowmaw i need to close the modal if $.get() fails, and show another modal with an error text. -

2 Respuestas

En primer lugar, as @ChristianEngel correctly pointed out, the JSFiddle you provided in your question is listening to the show event on a non-element (#modal-delete), whereas it should be attached to the actual modal (#myModal) [which you did correctly in your code].

Second, despite that correct observation, I can still attest that I am seeing the behavior that you are complaining about, and here's why: the Mostrar event is triggered before the actual modal has been shown, and hence your call to hide() is made before the rest of the show() code. One way to fix it would be to listen to the shown evento en su lugar. That is not the way to do it!!

The correct way to do what you are attempting is to simply call preventDefault() en el evento.

$('#myModal').on('show', function(e) {
  if (true) {e && e.preventDefault()}


This will save a whole bunch of unnecessary code being executed.

By the way, I'll just add that I think this scenario illustrates quite well the reason for having both a show y shown event. While not the only reason for the show event, having it trigger antes the action occurs allows for the developer to cancel it when required.

contestado el 23 de mayo de 17 a las 12:05

Well, everything works as expected. I updated your fiddle:

Respondido 31 Jul 12, 10:07

You could also simply add the attribute data-dismiss="modal" to every button in the action bar that should close the modal. - cristiano Engel

OK, maybe i can't explain very well. I need to close the modal if something happens (e.g. $.get() fails). Of course your link closes the modal... - Polmonino

So simply call $('#myModal').modal('hide'); and the modal will fade away, as demonstrated in my fiddle... - cristiano Engel

You are not constrained to call that function in an click event. Just fire your ajax request and close the modal in the error callback. - cristiano Engel

You can't get the point. $('#myModal').modal('hide'); does NOTHING inside .on() function. As demostrated in my fiddle... I edited the question, maybe you can get it better. - Polmonino

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.