Я столкнулся со следующей проблемой:
Определение класса, добавленное (программно) к элементу внутри модального всплывающего окна, когда модал активен, не сохраняется после закрытия модели. Это отличается от ситуации, когда определение класса сохраняется в элементе после «скрытия» и «показа» его стандартными методами jQuery.
Чтобы проиллюстрировать проблему, найдите ниже тестовую страницу.
Любое объяснение?
Заранее спасибо,
-Itai
Нажмите «jQuery Show Modal»
Нажмите «Добавить класс»
Нажмите «jQuery Hide Modal»
Нажмите «jQuery Show Modal»
Нажмите «Показать класс» (появится «aClass anotherClass»)
Нажмите «jQuery Hide Modal»
Нажмите SimpleModal Open
Нажмите «Показать класс» (появится «aClass anotherClass»)
Нажмите SimpleModal Close
Нажмите «jQuery Show Modal»
Нажмите «Удалить класс»
Нажмите «Показать класс» (вы увидите только «aClass»)
Нажмите «jQuery Hide Modal»
Нажмите SimpleModal Open
Нажмите «Добавить класс»
Нажмите «Показать класс» (появится «aClass anotherClass»)
Нажмите SimpleModal Close
Нажмите SimpleModal Open
Нажмите «Показать класс» (появится «aClass») <- Проблема (другой класс не был сохранен) </p>
// 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 (функция ($) {
var frm = {
сообщение: ноль,
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();
});