jquery - 如何在提交表单之前制作模式确认对话框？

Question

我是网络/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>

如果有人引导我去网上某个地方学习网络编程速成类(class)，那就太好了:)

Answer 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。

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

希望这有帮助。

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

但是，我认为这不会影响您的表单提交，因此您应该可以很好地使用此方法。