分享好友 教程首页 教程搜索 频道列表

jQuery点击页面其他任意地方关闭弹框

2021-10-24 17:387120
+关注30
核心提示:可用于任意页面的弹窗效果

可用于任意页面,注意要加入 jquery-1.8.3.min.js 才能使用

HTML代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <title>测试弹框</title>
         </head>
    
    <body>
        <div class="click">点击</div>
        <div class="show" style="border:1px solid blue;width:200px;display:none;">这里是展示区</div>
    <script type="text/javascript">
        $(".click").click(function(e){
            if($(".show").hasClass("allhide")){
                $(".show").hide();
                $(".show").removeClass("allhide");
                return;
            }
            e.stopPropagation();
            $(".show").show();
            $(".show").addClass("allhide");
        });
        $(document).click(function(){
            if($(".show").hasClass("allhide")){
                $(".show").hide();
                $(".show").removeClass("allhide")
            }
        });
    </script>
</body>
</html>
本文标签: #弹窗 #隐藏 #展开 #任意 #点关闭
整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

常用的弹窗关闭带时间缓存js效果

    在前端开发中,常用的到的弹窗关闭时间周期,确定后再规定的时间内不会再次显示

小黑 JavaScript教程2024-12-12

js怎么实现弹幕功能

    实现方法:1、创建html文件;2、添加html代码架构;3、在body标签中使用div、input、button标签分给页面设计效果显示框、输入框、弹幕提交按钮;4、添加script标签并写入js代码来实现弹幕效果;5、通过浏览器方式查看设计效果。

小黑 JavaScript教程2024-03-12

在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

    今天介绍在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

小黑 JavaScript教程2023-07-28

手机版上的弹窗html、css、js

    以下是一个简单的示例弹窗的 HTML、CSS 和 JavaScript 代码,这个弹窗的样式和动作分别由 CSS 和 JavaScript 控制。当页面加载完毕后,自动运行

小黑 CSS教程2023-04-12

html实现弹窗的实例

    用html及原生js写个弹窗,供参考

网络转载 网页素材2021-12-22

下一篇
我来说两句
抢沙发