1

次の問題が発生しました。

モーダルがアクティブなときにモーダル ポップアップ内の要素に (プログラムによって) 追加されたクラス定義は、モデルを閉じた後は保持されません。これは、標準の jQuery メソッドを介して「非表示」および「表示」した後、クラス定義が要素に保持される状況とは対照的です。

問題を説明するために、以下のテスト ページを見つけてください。

説明はありますか？

前もって感謝します、

-イタイ

「jQuery モーダル表示」をクリック</p>

[クラスを追加] をクリックします</p>

「jQuery 非表示モーダル」をクリックします</p>

「jQuery モーダル表示」をクリック</p>

「クラスを表示」をクリックします (「aClass anotherClass」が表示されます)。

「jQuery 非表示モーダル」をクリックします</p>

SimpleModal Open をクリックします。

「クラスを表示」をクリックします (「aClass anotherClass」が表示されます)。

SimpleModal 閉じるをクリックします。

「jQuery モーダル表示」をクリック</p>

[クラスを削除] をクリックします</p>

「クラスを表示」をクリックします（「aClass」のみが表示されます）

「jQuery 非表示モーダル」をクリックします</p>

SimpleModal Open をクリックします。

[クラスを追加] をクリックします</p>

「クラスを表示」をクリックします (「aClass anotherClass」が表示されます)。

SimpleModal 閉じるをクリックします。

SimpleModal Open をクリックします。

「クラスの表示」をクリックします (「aClass」が表示されます) <-- 問題 (別のクラスが保持されませんでした)

// 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]) ...
    }
});

また、提供したコードでは、onCloseコールバックを使用して呼び出す$.modal.close();必要はありません。ダイアログが閉じると、そのステップが自動的に実行されます。

お役に立てば幸いです。

-エリック

于 2010-07-15T15:38:24.620 に答える