提交表单之前如何进行模式确认对话框? [英] How to make a modal confirmation dialog before submitting a form?

问题描述

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

I am a beginner in web/javascript programming and wonder if anyone can give me a kick start simple example of a modal confirm dialog just before a form with multiple submit buttons being submitted using a pre-defined button? I stumbled upon jQuery and SimpleModal and wonder if it would fit my ASP MVC project.

我最终遇到了以下无效代码，我认为我的第一个问题是不知道如何从对话框中返回值?

I ended up in the following non-working codes, I think my 1st problem is do not know how to return a value from the dialog?:

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

如果有人将我引导到在线某个地方的Web编程速成课程，那将是很好的:)

It would be nice if anyone direct me to somewhere online for a crash course of web programming :)

推荐答案

我个人并没有那样做.

Boxy 是一个已经具有确认框控件的jQuery插件.

Boxy is a jQuery plugin that has a confirm box control already.

示例如下:

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

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

If you take a look at the Boxy site itself, it'll also show you how to retrieve the value submitted etc.

为您实施....

 $(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.

And then place an ID on the submit button of mySubmitBtn.

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

I've not tested that code off hand but that should hopefully do the trick.

希望这会有所帮助.

尽管根据开发人员的说法，此方法不不是要替换浏览器提供的本机window.confirm()函数，因为它没有能力在可见对话框时阻止程序执行.

Though according to the developer this method is not intended to replace the native window.confirm() function provided by browsers as it does not have the capability to block program execution while the dialog is visible.

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

However, I don't think that would effect your form submit, so you should be all good to use this method.

这篇关于提交表单之前如何进行模式确认对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！