1

我遇到了以下问题：

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

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

有什么解释吗？

提前致谢，

-痛

点击“jQuery Show Modal”</p>

点击“添加类”</p>

点击“jQuery隐藏模态”</p>

点击“jQuery Show Modal”</p>

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

点击“jQuery隐藏模态”</p>

单击 SimpleModal 打开

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

单击 SimpleModal 关闭

点击“jQuery Show Modal”</p>

点击“删除类”</p>

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

点击“jQuery隐藏模态”</p>

单击 SimpleModal 打开

点击“添加类”</p>

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

单击 SimpleModal 关闭

单击 SimpleModal 打开

点击“Show Class”（你会看到“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 = { message: 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();

});

4

1 回答 1

2

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

1）使用persist选项：

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

2）在onShow回调中添加类：

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

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

希望有帮助。

-埃里克

于 2010-07-15T15:38:24.620 回答