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

原创设计定制开发

满足您的个性化需求

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

0 0

jquery点击弹出一个盒子

苗成龙| 发布于 2021-10-14 19:47:36| 583阅读| 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>