jqmodalマスク層の実現

本編では、プラグインの使用中に注意すべき点をいくつか説明します.まず最も簡単なhtmlコードを見てみましょう.以下は私たちがポップアップするマスク層です.

<div class="pop_box" id="pop">
</div>

次に、jqModalマスクのスタイルを簡単に見てみましょう.

.pop_box { background-color:#79A5D1; display:none; height:342px !important; left:50%; margin-left:-250px; padding:5px; position:fixed; top:150px; width:500px; z-index:9999; }

ここで重要なのはjqModalマスク層のpositionとz-index属性である.マスク層が一番上にあることを保証するために、z-index値を大きく設定することをお勧めします.
最後にjqModalプラグインの使い方を見てみましょう.

jQuery(document).ready(function() {
    jQuery("#pop").jqm({
        modal: true,
        overlay: 40,
        onShow: function(h) {
            h.w.fadeIn(500);
        },
        onHide: function(h) {
            h.o.remove();
            h.w.fadeOut(500)
        }
    }).jqmAddClose("#close");
    jQuery("#show").click(function() {
        jQuery("#pop").jqmShow();
    });
});

.jqm()マスクを初期化し、modal:trueの場合、マスクレイヤが表示されます.overlayはマスク程度なので、自分でやってみてください.onShowはマスク層表示方式であり、本例ではfadeIn()であり、onHideはマスク層を閉じる.jqmAddClose()マスク層を閉じるセレクタを追加します.IDセレクタでもスタイルセレクタでも構いません.
.jqmShow()はマスクを実行するため、この例では「マスクレイヤーの表示」リンクをクリックするとマスクが表示されます.
http://dev.iceburg.net/jquery/jqModal/はjqModalの公式の例であり、より詳細な説明とより多くのアプリケーションを見つけることができます.jqModalファイルは小さくて、スピードが速くて、カスタマイズ性がとても良くて、皆さんにお勧めします.