Question

我遇到了以下问题：

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

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

有任何解释吗？

提前致谢，

-Itai

点击“jQuery Show Modal”

点击“添加课程”

点击“jQuery Hide Modal”

点击“jQuery Show Modal”

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

点击“jQuery Hide Modal”

单击SimpleModal Open

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

单击SimpleModal关闭

点击“jQuery Show Modal”

点击“删除课程”

点击“显示课程”（您只会看到“aClass”）

点击“jQuery Hide Modal”

单击SimpleModal Open

点击“添加课程”

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

单击SimpleModal关闭

单击SimpleModal Open

单击“显示类”（您将看到“aClass”）＆lt; - 问题（未保留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 = { 消息：null， init：function（）{ $（'＃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();是没有必要的。对话框关闭后，它将自动执行该步骤。

希望有所帮助。

-Eric

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

1 个答案: