Question

当用户点击链接时，我正在使用Simple Modal创建模态框。在这个模态框内部是一个装有jquery ui标签的div。但是，在打开模态之前，会更改这些选项卡中的内容。在我的jsFiddle示例中，它并没有显示该部分。

问题通过第一次单击链接打开模式，模式框显示并且选项卡正常工作。

关闭模态并重新打开。（用户可以点击相同的链接）。

标签不起作用。

当我尝试销毁实例并在每次调用函数时重新创建以打开模态，我得到：

Chrome开发者工具报告未捕获的TypeError：无法读取未定义的属性“hash”。

$(document).ready(function() {
    $('#tabs').tabs();
});

function getDetails(atag) {
    $('#hotelDetails').modal({
                minHeight: 100,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs();
                            $("#tabs").tabs("option", "active", $("#" + atag).index()-1);
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                                $('#tabs').tabs("destroy");
                            });
                        });
                    });
                },
                zIndex: 3000
            });
}

（参见示例http://jsfiddle.net/R44Yh/1/）

我试过做一个REFRESH调用我认为需要更改内容，它不会报告任何错误，但也不会更改标签。

$(document).ready(function() {
    $('#tabs').tabs();
});

function getDetails(atag) {
    $('#hotelDetails').modal({
                minHeight: 100,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs( "refresh" );
                            $("#tabs").tabs("option", "active", $("#" + atag).index()-1);
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                },
                zIndex: 3000
            });
}

（参见示例http://jsfiddle.net/QYmxH/2/）

Answer 1

我的解决方案只适用于使用Eric Martin的SimpleModal。

我发现有一个名为 persist 的选项标记，用于保留DOM的元素。默认情况下，它设置为 false 。将其设置为 true 将使DOM元素保持不变。以下是Eric的网站所说的内容：

persist [Boolean：false]

跨模态调用保留数据？仅用于现有DOM元素。如果为true，则将在模态调用之间维护数据，如果为false，则数据将恢复为其原始状态。

示例代码：

$('#hotelDetails').modal({
                persist: true,
                modal: false,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs();
                            $("#tabs").tabs("option", "active", $("#" + atag).index());
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                                $('#tabs').tabs("destroy");
                            });
                        });
                    });
                },
                zIndex: 3000
            });

隐藏和重新显示后，Jquery UI选项卡失败

1 个答案: