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

【问题标题】：jQuery.simplemodal-1.3.5 plugin: class selector disappears mysteriouslyjQuery.simplemodal-1.3.5 插件：类选择器神秘消失
【发布时间】：2010-07-14 18:13:44
【问题描述】：

我遇到了以下问题：

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

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

有什么解释吗？

提前致谢，

-意大利

点击“jQuery Show Modal”

点击“添加类”

点击“jQuery隐藏模式”

点击“jQuery Show Modal”

点击“Show Class”（你会看到“aClass anotherClass”）

点击“jQuery隐藏模式”

点击 SimpleModal 打开

点击“Show Class”（你会看到“aClass anotherClass”）

点击 SimpleModal 关闭

点击“jQuery Show Modal”

点击“删除类”

点击“Show Class”（你只会看到“aClass”）

点击“jQuery隐藏模式”

点击 SimpleModal 打开

点击“添加类”

点击“Show Class”（你会看到“aClass anotherClass”）

点击 SimpleModal 关闭

点击 SimpleModal 打开

点击“Show Class”（你会看到“aClass”）

// 测试.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(函数($) { 变种 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();

});

【问题讨论】：

标签： jquery-plugins simplemodal

【解决方案1】：

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

1) 使用persist 选项：

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

2) 在 onShow 回调中添加类：

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

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

希望对您有所帮助。

-埃里克

【讨论】：