15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

jquery点击弹出一个盒子

苗成龙| 发布于 2021-10-14 19:47:36| 516阅读| 0点赞| 0评论
举报

通过 jquery 实现点击 一个盒子弹出另一个盒子

通过 jquery 实现 ,点击 一个盒子弹出另一个盒子。

先引入jquery文件

<script src="js/jquery-1.10.2.min.js">script>

在创建好盒子

div id="btnShow">     点击
    div>
    <div id="divTop">
    div>

通过下面js代码来实现

<script>
    $(function() {
        $("#btnShow").click(function(event) {
            //取消冒泡事件
            event.stopPropagation(); //这句是必须
            //若css已经给divTop定位则不需要再定位
            var offset = $(event.target).offset();
            $("#divTop").css({
                top: offset.top + $(event.target).height + "px",
                left: offset.left
            });
            $("#divTop").slideToggle();
        });

        //点击空白或者其他区域时divTop隐藏
        $(document).click(function() {
            $("#divTop").slideUp('slow');
        });
        //点击divTop自身隐藏
        $("#divTop").click(function() {
            $(this.fadeOut(1000));
        })
    });
script>

最后结束。

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

苗成龙
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部