富贵资源网 Design By www.hznty.com
弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。
效果代码如下
在弹出层中下面是核心代码
<script type="text/javascript">
// 渐变弹出层
$(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) });//单击弹出层则自身隐藏
});
</script>
完整实例
<!-- 渐变弹出层 --> <div id="race"><a href="#">点击</a></div> <div id="racePop" class="raceShow">这里是弹出层效果</div> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...