Модальное диалоговое окно закрывается немедленно

Question

У меня проблема с модальным диалоговым окном, оно активируется, когда пользователь нажимает кнопку ввода, затем появляется модальное диалоговое окно и сразу исчезает, ничего не делая.

Код:

$('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;
});

Кроме того, как я могу сделать это, когда пользователь нажимает ОК в модальном диалоге, событие продолжается?

Answer 1

добавьте e.preventDefault ();

и отправьте форму по нажатию кнопки Ok после того, как для true установлено значение 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;
                });

Answer 2

Насколько я понимаю, вы можете попробовать:

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

Надеюсь, это поможет.

Answer 3

У меня были оба файла начальной загрузки в конце моего кода:

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

Затем я удалил bootsrap.min.js, и он работал, также я включил в конце:

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

Answer 4

Вы также можете проверить, что ваш a-tag href равен "#". У меня не было этих и ссылка автоматически отправляет. С хешем все работает как положено.

Answer 5

Вместо:

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

Используйте это:

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

Answer 6

У меня возникла та же проблема, в то время как я перешел на расширенную версию диалогового окна Modal.По какой-то причине создатель назвал его Nifty dailog box.

Вы можете получить доступ к документации с Барабана

Answer 7

Чтобы убедиться, что событие распространяется ожидаемым образом, просто верните true из соответствующего метода.

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