jquery实现点击弹出层效果的简单实例

弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。效果代码如下

在弹出层中下面是核心代码复制代码代码如下：脚本类型=' text/JavaScript '//渐变弹出层$(文档)。ready(function(){ var speed=600；//动画速度$(' #比赛a ').点击(函数（事件){//绑定事件处理事件。stopperpagation()；var偏移量=$(event.target).offset()；//取消事件冒泡$('#racePop ').CSS({ top :偏移量。top $(活动。目标).高度()' px '，左侧：偏移。左})；//设置弹出层位置$('#racePop ').显示（速度);//动画显示});$(文档)。click(function(event){ $(' # race pop ')).hide(speed)})；//单击空白区域隐藏$('#racePop ').click(function(event){ $(' # race pop ')).hide(speed)})；//单击弹出层则自身隐藏});/script完整实例复制代码代码如下：-渐变弹出层- div id='race'a href='# '点击/a/div div id=' RacePop ' class=' RaceShow '这里是弹出层效果/div脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。7 .1/jquery。量滴js '/script脚本类型=' text/JavaScript '//渐变弹出层$(文档)。ready(function(){ var speed=600；//动画速度$(' #比赛a ').点击(函数（事件){//绑定事件处理事件。stopperpagation()；var偏移量=$(event.target).offset()；//取消事件冒泡$('#racePop ').CSS({ top :偏移量。top $(活动。目标).高度()' px '，左侧：偏移。左})；//设置弹出层位置$('#racePop ').显示（速度);//动画显示});$(文档)。click(function(event){ $(' # race pop ')).hide(speed)})；//单击空白区域隐藏$('#racePop ').click(function(event){ $(' # race pop ')).hide(speed)})；//单击弹出层则自身隐藏});/script样式正文{ margin 33600 autofont:12px/1.5 tahoma，arial，5b 8 B4 f 53颜色： # 828282背景： # fff }车身，h1、h2、h3、h4、h5、h6、p、ul、li、dl、dt、dd { padding:0margin:0 } Li {列表式：无；} img { border : none } em { font-style : normal；} a { color: # 555文本装饰：无；outline:noneBLR :这个。onfocus=这个。blur()；} a:hover { color: # 000文本修饰：下划线；}正文{ font-size :12 pxHelvetica凡尔登纳阿里亚尔，无衬线；断字：断字；单词包装：断字；}.清除{ height:0飞越：隐藏；clear:both}/*渐变弹出层*/# race {显示：块；宽度宽度：200像素高度：50 px线高：50 px文本对齐：居中；背景# CCCborder:#555 1px固体；margin:10px auto } .赛事展示{底色： # f1 f1border:solid 1px # ccc位置：绝对；display:none宽度宽度：300像素高度：100 pxpadd :5 px font-size :12 px；}/样式