js实现点击div外部隐藏弹出框

最新推荐文章于 2022-11-18 16:30:47 发布

转载最新推荐文章于 2022-11-18 16:30:47 发布 · 917 阅读

文章标签：

#JS

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript结合jQuery库，实现网页中DIV元素的显示和隐藏效果，包括淡入淡出的过渡动画，以及通过按钮点击事件控制DIV的显示状态。

    body{
       background-color:#999999;
    }
    #myDiv{
       background-color:#FFFFFF;
       width:250px;
       height:250px;
       display:none;
    }

    <input id="btn" type="button" value="切换显示DIV" />
    <div id="myDiv">
    This is a div;
    </div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    var myDiv = $("#myDiv");
    $(function (){
       $("#btn").click(function (e) {
           e.stopPropagation();//阻止事件向上冒泡
           myDiv.stop().fadeToggle();
           $(document).one("click", function () {//对document绑定一个影藏Div方法
               myDiv.stop().hide();
           });
           myDiv.click(function (e) {
               e.stopPropagation();
           });
       });
    });
---------------------
作者：zh_rey
来源：优快云
原文：https://blog.youkuaiyun.com/zh_rey/article/details/78496417
版权声明：本文为博主原创文章，转载请附上博文链接！