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

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

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

可用于任意页面,注意要加入 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怎么实现弹幕功能

    实现方法: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

前端开发技术之jquery实现可关闭的倒计时广告特效HTML代码

    这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各

网络转载 JS相关2021-12-22

下一篇
我来说两句
抢沙发