jquery實作點擊彈出層效果的簡單實例_jquery

彈出層在實際應用中我們經常會碰到大量的彈出層效果，下面我來做一個基於jquery的簡單的彈出層效果實例，各位朋友有興趣可參考。

效果程式碼如下：

在彈出層下面是核心程式碼

複製程式碼 程式碼如下:

// 漸變彈出層

$(document).ready(function(){ var speed = 600;//動畫速度 $("# race a").click(function(event){//綁定事件處理  event.stopPropagation();  var offset = $(event.target).offset();//取消事件冒泡  $("#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) });//點選彈出層則自身隱藏

});

完整實例




複製代碼


程式碼如下:

點選

這裡是彈出層效果

  $("#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) });//點擊彈出層則自身隱藏

});