创建一个模式对话框确认，表明已从表单发送电子邮件

Basically the setup is as follows. I have a simple contact page. Users select email recipients and then fill in the message subject and text. When they click submit the form is submitted using jQuery and a ajax call is made that returns the success (or failure) that said message was correctly processed and sent by the php script.

基本上设置如下。我有一个简单的联系页面。用户选择电子邮件收件人，然后填写邮件主题和文本。当他们点击提交时，表单是使用jQuery提交的，并且进行了ajax调用，返回成功（或失败）所述消息被php脚本正确处理和发送。

Currently the code looks like this.

目前代码看起来像这样。

$(document).ready(function(){
        var options = { target: '#results' }; 
            $('#classemail').submit(function() {
                $(this).ajaxSubmit(options); 
                return false; 
            });
    });
    function fade(div_id, button) {
    if(button.value == 'Send') {
        $('#'+div_id).empty().show().delay(7000).fadeOut(1000);
    }
        }

The sends the form and the html response is displayed in the results div.

发送表单，html响应显示在结果div中。

<div class="results" id="results"><div>

pretty basic... The issue is that I would prefer to do this response back with a modal dialog box since having the div handle it requires real estate on the page and it is not as evident or intuitive as a modal dialog box would be. To that end I have attempted to add such functionality, but frankly, I am probably a little beyond my current understanding of jquery and how to accomplish this. Is this achievable? Can someone point me in the right direction or should I be considering other ways of accomplishing this?

非常基本...问题是我更喜欢用模态对话框做回这个响应，因为有div处理它需要页面上的空间，并且它不像模态对话框那样明显或直观。为此，我试图添加这样的功能，但坦率地说，我可能有点超出了我目前对jquery的理解以及如何实现这一点。这可以实现吗？有人能指出我正确的方向，还是我应该考虑其他方法来实现这一目标？

Thanks

谢谢

1 个解决方案

#1

After the result is returned. u can init the div to become a dialog. the dialog will autoOpen by default. check here for more info on how to configure it. You can also destroy the dialog once you don't need it by calling .dialog( "destroy" )

返回结果后。你可以初始化div成为一个对话框。默认情况下，对话框将自动打开。点击此处了解有关如何配置它的更多信息。一旦你不需要它就可以通过调用.dialog（“destroy”）来销毁对话框。

Remove the dialog functionality completely. This will return the element back to its pre-init state. However you might want to empty the div before destroying the dialog because it'll become visible.

完全删除对话框功能。这将使元素返回到pre-init状态。但是，您可能希望在销毁对话框之前清空div，因为它将变为可见。

$(".results").dialog({modal:true});