如何在提交表单之前进行模态确认对话框？答案

【问题标题】：How to make a modal confirmation dialog before submitting a form?如何在提交表单之前进行模态确认对话框？
【发布时间】：2010-05-06 22:47:42
【问题描述】：

我是 web/javascript 编程的初学者，想知道是否有人可以在使用预定义按钮提交具有多个提交按钮的表单之前给我一个模式确认对话框的简单示例？我偶然发现了 jQuery 和 SimpleModal，想知道它是否适合我的 ASP MVC 项目。

我最终得到了以下非工作代码，我认为我的第一个问题是不知道如何从对话框中返回值？：

<script type="text/javascript">
    $(document).ready(function() {
    $("form").submit(function(ev) {
            return confirm("Confirm?");
        });
    });

    function confirm(message) {
        $("#confirm").modal({
            close: true,
            overlayId: "confirmModalOverlay",
            containerId: "confirmModalContainer",
            onShow: function modalShow(dialog) {
                dialog.overlay.fadeIn("slow", function() {
                    dialog.container.fadeIn("fast", function() {
                        dialog.data.hide().slideDown("slow");
                    });
                });

                dialog.data.find(".confirmMessage").append(message);
                dialog.data.find(".btnYes").click(function() {
                    $.modal.close();                                       
                });
            }
        })
    }        
</script>


<div id="confirm" style="display:none">
    <a href="#" title="Close" class="modalCloseX simplemodal-close">x</a>
    <div class="confirmHeader"><span>Confirm</span></div>
    <p class="confirmMessage"></p>
    <div class="buttons">
        <div class="btnYes">Yes</div><div class="btnNo simplemodal-close">No</div>
    </div>
</div>

如果有人指导我到网上某个地方学习网络编程速成课程，那就太好了：)

【问题讨论】：

你不能有一个模式对话框，因为它会劫持浏览器显示其他标签的能力。（不，这是不可接受的。）但是，您可以使用 JavaScript 在页面本身上进行叠加，我将留给其他人来解释。
我已经更新了我的答案，为您的脚本添加了 boxy 的可能实现。

标签： jquery

【解决方案1】：

就我个人而言，我并没有这样做。

Boxy 是一个 jQuery 插件，已经有一个确认框控件。

它的例子如下：

$('#confirm-actuator').click(function() {
    Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'});
    return false;
});

如果您查看 Boxy 网站本身，它还会向您展示如何检索提交的值等。

编辑： 为您实现......

 $(document).ready(function() {
    $("form").submit(function(ev) {
        $('#mySubmitBtn').click(function() {
            Boxy.confirm("Are you sure?", function() { /**DO ACTION FOR CONFIRM**/ }, {title: 'Confirm'});
            return false;
        });
    });

});

然后在mySubmitBtn的提交按钮上放置一个ID。

我还没有测试过该代码，但希望它可以解决问题。

希望这会有所帮助。

尽管根据开发人员的说法，此方法并非旨在替换浏览器提供的本机 window.confirm() 函数，因为它无法在对话框可见时阻止程序执行。

但是，我认为这不会影响您的表单提交，所以您应该可以使用这种方法。

【讨论】：

非常感谢您的帮助。我已经尝试过 Boxy 并在所有这些 javascript 方面学到了更多东西。但是我不能让它工作得很好，我最终使用了另一个 jQuery 插件（用于读取/设置隐藏字段的字段插件）和我当前项目的内置确认对话框。
你不能让它工作得很好是什么意思？我第一次尝试使用它时遇到了一些问题，但如果可以的话，我很乐意提供帮助。如果顺便说一句，请不要忘记投票并标记为答案。虽然我自己是新来的，所以我不确定是否每个人都这样做。

【解决方案2】：

以下是实现此目的的 3 种不同方法的细分：

Modal Confirmation Dialog on Form Submit

【讨论】：

【解决方案3】：

提交表单时，您不需要使用 jquery 来进行简单的模态确认对话框。浏览器提供了一些模态系统外观对话框。一个是“确认”。

这个简单的 javascript 可以做到：

<form method="post" action="myurl.aspx" onsubmit="return confirm('Submit this form?')">
...
</form>

对于速成课程，您可以查看 W3Schools 或在 Google 上搜索教程。

【讨论】：