El diálogo modal se cierra inmediatamente

I'm having a problem with the modal dialog, it activates when the user push and input button, then the modal dialog shows, and disappears immediately without do it anything.

El código:

$('form').submit(function(e) {
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body');
    }
    dialog.load(
        $("#dialog").dialog({
            close: function(event, ui) {
                dialog.remove();
            },
            resizable: false,
            //height: 140,
            //width: 460
            modal: true,
            buttons: {
                "Ok": function() {
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        })
    );
    return true;
});

Besides, how can I make that, when the user push ok in the modal dialog, the event continues?

preguntado el 09 de marzo de 12 a las 13:03

Call your event in button "OK" handler. -

thanks! i'm going to try it!, any clue why i', having problems with the modal dialog? it closes inmediatly it appears? -

Do you mean it doesn't wait for the user to click any button? -

yes, just show, ant then hide, and the event continues without the "ok" of the modal dialog -

Try adding e.preventDefault(); as your first line in the function. The submit action of your form may be causing the dialog to close out. Also, as said above, get rid of the last return true; statement. It is unnecessary. If you still need the form to POST, use the .post() method or .ajax() methods of jQuery to get the data back to the server. -

7 Respuestas

add e.preventDefault();

and submit the form on Ok button click after set true to isConfirmed

var isConfirmed = false;


$('form').submit(function(e) {
               if(!isConfirmed){
                    var dialog = $("#dialog");
                    if ($("#dialog").length == 0) {
                        dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body');
                    }
                    dialog.load(
                        $("#dialog").dialog({
                            close: function(event, ui) {
                                dialog.remove();
                            },
                            resizable: false,
                            //height: 140,
                            //width: 460
                            modal: true,
                            buttons: {
                                "Ok": function() {
                                    $(this).dialog("close");
                                    isConfirmed=true;
                                    $("form").submit();
                                },
                                Cancel: function() {
                                    $(this).dialog("close");
                                }
                            }
                        })
                    );
                   e.preventDefault();
                   return false;
               }
               else
                  return true;
                });

respondido 09 mar '12, 14:03

As per my understanding you can try:

buttons: {
                                "Ok": function() {
                                    //Call your event here. 
                                    $(this).dialog("close");
                                },
                                Cancel: function() {
                                    $(this).dialog("close");
                                }
                            }

Espero que esto ayude.

respondido 09 mar '12, 13:03

I had both bootstrap files at the end of my code:

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>

Then I removed bootsrap.min.js and it worked, also I included at the end:

<script>
    $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
     });
</script> 

respondido 31 mar '17, 02:03

You could also verify that your a-tag href is "#". I did not have these and the link auto-submits. With the hash it works as expected.

Respondido 01 Oct 13, 17:10

En lugar de:

    $('#modalID').modal('show');

Utilizar este :

    $('#modalID').dailog('show');   

Respondido el 08 de diciembre de 18 a las 06:12

To make sure that the event propagates as expected just return true from the corresponding method.

"Ok": function() {
     return true;
 }

respondido 09 mar '12, 13:03

I got the same problem, meanwhile I shifted to advanced version of Modal Dialog box. The creator named it Nifty dailog box for some reason.

You can access documentation from Tímpano

Respondido 03 Feb 15, 17:02

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