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;
});

此外，我怎样才能做到这一点，当用户在模态对话框中按ok时，事件会继续？

Answer 1

添加e.preventDefault（）;

并在设置为isConfirmed

的true后单击Ok按钮提交表单

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

您还可以验证您的a-tag href是否为“＃”。我没有这些，链接自动提交。使用哈希它按预期工作。

Answer 4

我的代码末尾有两个引导程序文件：

<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 5

要确保事件按预期传播，只需从相应的方法返回true。

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

Answer 6

我遇到了同样的问题，同时我转向了Modal对话框的高级版本。由于某种原因，创作者将其命名为Nifty dailog box。

您可以访问Tympanus

中的文档

Answer 7

代替：

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

使用此：

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

模态对话框立即关闭

7 个答案: