плагин jQuery.simplemodal-1.3.5: селектор класса исчезает загадочно

Я встретился со следующей проблемой:

Определение класса, добавленное (программно) к элементу в модальном всплывающем окне, в то время как модальное активно, не сохраняется после того, как модель закрывается. Это в отличие от ситуации, где определение класса сохраняется на элементе после “сокрытия” и “показа” ее с помощью стандартных методов jQuery.

Для иллюстрирования проблемы см. ниже тестовую страницу.

Какое-либо объяснение?

Заранее спасибо,

- Itai

Нажмите “jQuery Show Modal”

Нажмите “Add Class”

Нажмите “jQuery Hide Modal”

Нажмите “jQuery Show Modal”

Нажмите “Show Class” (You будет видеть “класс А anotherClass”),

Нажмите “jQuery Hide Modal”

Нажмите SimpleModal Open

Нажмите “Show Class” (You будет видеть “класс А anotherClass”),

Нажмите SimpleModal Close

Нажмите “jQuery Show Modal”

Нажмите “Remove Class”

Нажмите “Show Class” (You будет видеть только “класс А”),

Нажмите “jQuery Hide Modal”

Нажмите SimpleModal Open

Нажмите “Add Class”

Нажмите “Show Class” (You будет видеть “класс А anotherClass”),

Нажмите SimpleModal Close

Нажмите SimpleModal Open

Нажмите “Show Class” (You будет видеть, что “класс А”) <-проблема (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 (функция ($) {кадр var = {сообщение: пустой указатель, init: функция () {$ ('#popup-opener') .click (функция (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();

});

1
задан 14 July 2010 в 18:13
поделиться

1 ответ

По умолчанию SimpleModal клонирует содержимое, используемое в диалоговом окне. У вас есть несколько различных вариантов, которые вы можете попробовать.

1) Используйте опцию persist:

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

2) Добавьте класс в обратный вызов onShow:

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

Кроме того, просто хотелось бы упомянуть, что в предоставленном вами коде, используя обратный вызов onClose и вызывая $.modal.close(); не требуется. Когда диалоговое окно закроется, оно автоматически выполнит этот шаг.

Надеюсь, что поможет.

-Эрик

2
ответ дан 2 September 2019 в 23:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: