0

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

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

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

标签不起作用。

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

Chrome 开发工具报告Uncaught TypeError: Cannot read property 'hash' of undefined 。

$(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/）

4

1 回答 1

0

我的解决方案只有在您使用 Eric Martin 的 SimpleModal 时才有效。

我发现有一个名为persist的选项标签保留了DOM 的元素。默认情况下，这设置为false。将此设置为true将保持 DOM 元素完好无损。以下是 Eric 的网站所说的：

坚持[布尔：假]

跨模态调用保留数据？仅用于现有的 DOM 元素。如果为真，数据将在模态调用中保持，如果为假，数据将恢复到其原始状态。

示例代码：

$('#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
            });
于 2013-05-30T13:15:44.023 回答