Question

我使用Eric Martin的SimpleModal插件1.4.1和JQuery 1.4.2在模态窗口中显示基本表单。

表单有2个JQuery UI Datpicker元素。

一切都按预期工作（我认为）。当用户将焦点放在Datepicker文本框上时，Datepickers会显示其日历。当用户单击“取消”按钮时，模态将消失，并且隐藏Datepicker元素中保存的值。这就是问题所在。

我需要模态窗口“忘记”窗口关闭时所包含的所有表单值，因为表单已提交或单击了取消按钮，而不仅仅是隐藏它们。我不介意我是否必须以编程方式执行此操作。

我当前的SimpleModal代码如下所示：

$('#NewDeliverable').click( function() {
            $("#DeliverableFormContainer").modal({onOpen: function (dialog) {
                dialog.overlay.fadeIn('slow', function () {
                    dialog.data.hide();
                    dialog.container.fadeIn('slow', function () {
                        dialog.data.slideDown('slow');
                    });
                });

修改感谢@Josiah Ruddell的帮助。以下是此问题的其他任何人的完整工作代码：

$('#NewDeliverable').click( function() 
        {
            $("#DeliverableFormContainer").modal({ 
                onOpen: function (dialog) 
                {
                    dialog.overlay.fadeIn('slow', function () 
                    {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function () 
                        {
                            dialog.data.slideDown('slow');
                        });
                    });
                },
                onClose: function(dialog)
                {
                    dialog.data.find(':input').each(function () 
                    {
                        switch (this.type) 
                        {
                            case 'password':
                                $(this).val('');
                                break;
                            case 'select-multiple':
                            case 'select-one':
                                $(this).val(-1);
                                break;
                            case 'text':
                            case 'textarea':
                                $(this).val('');
                                break;
                            case 'checkbox':
                            case 'radio':
                                this.checked = false;
                        }
                    });

                    $.modal.close(); // must call this!

                }, persist: true
            });
        });


            }});
        });

Answer 1

添加一个清除模态数据的onclose回调。您可以轻松地将其设为一个名为clear form的jquery插件。

$("#DeliverableFormContainer").modal({
    persist: true, // don't clone the data
    onOpen: function (){ /* code */ },
    onClose: function(dialog){
        dialog.data.find(':input').each(function () {
            if(this.type.match(/password|text|textarea/))
                $(this).val('');
            else if(this.type.match(/select\-multiple|select\-one/))
                $(this).val('-1');
            else if(this.type.match(/checkbox|radio/))
                this.checked = false;
        });
        $.modal.close(); // must call this!
    }
});

Answer 2

要更新模态窗口内容，请阅读本文，其中包含完美解决方案的代码，以帮助您进一步清理模态窗口内容以供将来使用...

如果您想要删除内容，只需按下＆＃34;空白数据并在关闭窗口关闭按钮＆＃34; ....

上调用该功能

Click here to see modal window data flush every time it calls the modal window

每次关闭模态窗口时如何删除SimpleModal中的数据

2 个答案: