jQuery.simplemodal-1.3.5 插件：类选择器神秘消失

Question

我遇到了以下问题：

在模式处于活动状态时（以编程方式）添加到模式弹出窗口内的元素的类定义在模型关闭后不会保留。这与通过标准 jQuery 方法“隐藏”和“显示”元素后类定义保留在元素上的情况形成对比。

为了说明问题，请在下面找到一个测试页。

有什么解释吗？

预先感谢，

-Itai

单击“jQuery Show Modal”

单击“添加类”

单击“jQuery Hide Modal”

单击“jQuery Show Modal”

单击“显示类”（您将看到“aClass anotherClass”）

单击“jQuery Hide Modal”

单击SimpleModal 打开

单击“Show Class”（您将看到“aClass anotherClass”）

单击 SimpleModal 关闭

单击“jQuery Show Modal”

单击“Remove Class”

单击“Show Class”（您将仅看到“aClass”）

单击“jQuery Hide Modal”

单击 SimpleModal 打开

单击“添加类”

单击“显示类”（您将看到“aClass anotherClass”）

单击 SimpleModal 关闭

单击 SimpleModal

打开 单击“显示类”（您将看到“aClass”） <-- 问题（anotherClass 不存在）保留)

// Test.html 将 $link$ 替换为

测试

<script type="text/javascript">
jQuery(function($) {

    $("#btnjQueryShow").click(function(){
        $('#test-frame').show();
    });

    $("#btnQueryHide").click(function(){
        $('#test-frame').hide();
    });

    $("#btnAddClass").click(function(){
        $('#divClassHolder').addClass("anotherClass");
    });

    $("#btnRemoveClass").click(function(){
        $('#divClassHolder').removeClass("anotherClass");
    });

    $("#btnShowClass").click(function(){    
        var classNames = "";
        var classList = $('#divClassHolder').attr('class').split(' '); 
            $.each( classList, function(index, item){ 
                classNames += item + " ";
            }); 

        alert(classNames);
    });
});

</script>

<!-- DOM Show / Hide-->
<div>
    <input id="btnjQueryShow" type="button" value="jQuery Show Modal" />
    <input id="btnQueryHide" type="button" value="jQuery Hide Modal" />
</div>

<br/>
<br/>
<br/>

$link$"#" id="popup-opener">SimpleModal Open</a>
<br>
<br>
<div id="test-frame" style="display:none; width:500px; background-color:white; border: solid 1px red">
    $link$"#" id="popup-closer" class="simplemodal-close" style="float:right;">SimpleModal Close</a><br>
    <div id="divClassHolder" class="aClass">
        <input id="btnAddClass"    type="button"  value="Add Class" />
        <input id="btnRemoveClass" type="button"  value="Remove Class" />
        <input id="btnShowClass"   type="button"  value="Show Class" />
    </div>
</div>

// popup.js

jQuery(function($) { var frm = { 消息：空， 初始化：函数（）{ $('#popup-opener').click(function(e) { e.preventDefault();

            $('#test-frame').modal(
 {
     overlayId: 'form-overlay',
     overlayCss: { backgroundColor: "#4178F0" },
     containerId: 'form-container',
     onOpen: frm.open,
     onShow: frm.show,
     close: false,
     minHeight: 590,
     minWidth: 635,
     position: ["5%", ],
  onClose: function(dialog) {
   $.modal.close();
  }
 });
        });
    },
    open: function(dialog) {

        // open handler
        dialog.overlay.show();

        dialog.container.show();

        dialog.data.show();            
        // file styles are not available in hidden divs!!
    },
    show: function(dialog) {

    },
    close: function(dialog) {

    },
    error: function(xhr) {
        // error handler
    },
    validate: function() {
        // validate handler
    },
    showError: function() {
        // error handler
    }
};

frm.init();

});

Answer 1

默认情况下，SimpleModal 克隆对话框中使用的内容。您有几种不同的选择可以尝试。

1) 使用 persist 选项：

$('#foo').modal({persist:true});

2) 在 onShow 回调中添加类：

$('#foo').modal({
    onShow: function (dialog) {
        var classList = $('#divClassHolder', dialog.data[0]) ...
    }
});

另外，只是想提一下，在您提供的代码中，使用 onClose 回调并调用 $.modal。 close(); 不是必需的。当对话框关闭时，它将自动执行该步骤。

希望有帮助。

-埃里克