jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡(jiǎn)單實(shí)例

更新時(shí)間：2014年03月03日 09:38:41 作者：

本篇文章主要是對(duì)jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

彈出層在實(shí)際應(yīng)用中我們經(jīng)常會(huì)碰到大量的彈出層效果，下面我來(lái)做一個(gè)基于jquery的簡(jiǎn)單的彈出層效果實(shí)例，各位朋友有興趣可參考。

效果代碼如下：

在彈出層中下面是核心代碼

<script type="text/javascript">
// 漸變彈出層
$(document).ready(function(){
 var speed = 600;//動(dòng)畫(huà)速度
 $("#race a").click(function(event){//綁定事件處理
  event.stopPropagation();
  var offset = $(event.target).offset();//取消事件冒泡
  $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//設(shè)置彈出層位置
  $("#racePop").show(speed);//動(dòng)畫(huà)顯示
 });
 $(document).click(function(event) { $("#racePop").hide(speed) });//單擊空白區(qū)域隱藏
 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//單擊彈出層則自身隱藏

});
</script>

完整實(shí)例

復(fù)制代碼代碼如下:

<div id="race"><a href="#">點(diǎn)擊</a></div>
<div id="racePop" class="raceShow">這里是彈出層效果</div>

});
</script>

/* 漸變彈出層 */
#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;margin:10px auto}
.raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}

</style>

您可能感興趣的文章: