クリックポップアップレイヤーを実現するjqueryの簡単な例effect_jquery

ポップアップ レイヤーの実際の応用では、多くのポップアップ レイヤー効果に遭遇することがよくあります。以下に jquery に基づいた簡単なポップアップ レイヤー効果の例を作成します。興味のある方は参考にしてください。

エフェクトコードは次のとおりです:

以下はポップアップ レイヤーのコア コードです

コードをコピーします コードは次のとおりです:

< ;script type="text/javascript">
//グラデーションポップアップレイヤー
$(document).ready(function(){
varspeed = 600;//アニメーションSpeed
$( "#race a").click(function(event){//バインド イベント処理
event.stopPropagation();
var offset = $(event.target).offset() ;//イベント Bubble
をキャンセル $("#racePop").css({ top:offset.top $(event.target).height() "px", left:offset.left });//設定ポップアップレイヤーの位置
$("#racePop").show(speed);//アニメーション表示
});
$(document).click(function(event) { $("#racePop ").hide(speed) });//空白部分をクリックして非表示にします
$("#racePop").click(function(event) { $("#racePop").hide(speed) } );//クリックするとポップアップします レイヤー自体が非表示になります

});

完全な例

コードをコピー コードは次のとおりです:

クリック

これがポップアップですレイヤー効果