html5实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框

最新推荐文章于 2024-04-28 17:05:59 发布
最新推荐文章于 2024-04-28 17:05:59 发布
阅读量1.5w 收藏 5
点赞数
分类专栏： HTML
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <script src="js/jquery-1.8.3.min.js"></script>  
  7.     <style>  
  8.         *{padding: 0; margin: 0}  
  9.         .box{  
  10.             position: fixed;  
  11.             width: 100%;  
  12.             height: 100%;  
  13.             background: rgba(0,0,0,0.2);  
  14.             display: none;  
  15.         }  
  16.         .box1{  
  17.             width: 500px;  
  18.             height: 500px;  
  19.             position: fixed;left: 50%; top: 25%;  
  20.             margin-left: -250px;  
  21.             border: 1px solid #000000;  
  22.         }  
  23.     </style>  
  24.     <script>  
  25.    
  26.     </script>  
  27. </head>  
  28. <body>  
  29.     <div class="box">  
  30.         <div class="box1">  
  31.             <a href="javascript:;" οnclick="jQuery('.box').hide()" class="close">关闭</a>  
  32.         </div>  
  33.     </div>  
  34.     <a href="javascript:;" οnclick="jQuery('.box').show()" class="show">显示</a>  
  35. </body>  
  36. </html>
my98800
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5弹窗提示各种例子
04-08
H5alert弹窗提示各种例子，带样式非常的漂亮。有必要的同事可以下载下来看看
html网页弹窗
08-23
html网页弹窗
h5自动弹窗html模板,html5手机弹出对话框动画特效
weixin_39653766的博客
05-30 901
js代码//成功$("#success").click(function(){new TipBox({type:'success',str:'操作成功',hasBtn:true});});//错误$("#error").click(function(){new TipBox({type:'error',str:'对不起,出错了!',hasBtn:true});});//提示$("#tip").cl...
前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。
最新发布
nibabaoo的博客
04-28 963
HTML中的标签，浏览器的原生弹框。
html5中如何使弹出的窗口自动关闭,JS弹出div和关闭
weixin_42373066的博客
05-31 1069
//--弹出divvar parameter;var type;function alert_div(type,parameter){//获得鼠标当前X,Y坐标var x,y;if(!document.all){x=pageX;y=pageY;}else{x=document.body.scrollLeft+event.clientX; //鼠标X轴的值y=document.body.scroll...
使用JS、CSS、H5实现简单的登录弹窗，可保存用户信息
yzq0820的博客
07-06 3577
目录 一、效果展示二、H5布局三、css的布局四、获取元素六、设置登录弹窗出现与关闭七、设置弹窗的移动八、设置保存信息九、源码评论区自取网页结构分为三大块，第一部分点击a标签会弹出登录框，第二部分是登录框用户填写表单，需要注意A标签中使用javascript:;第三部分是设置突出背景三、css的布局需要注意登录弹窗和背景板的权重布局的时候就需要将，背景板和弹窗使用display: none;来实现消失的效果，在后续的步骤中来实现显现和消失的效果四、获取元素 需要将所有元素获取，......
H5实现提示框
qq_45970524的博客
06-17 1408
引入链接 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <button onclick="submit()">1111111</button> function submit() { swal("兑换码不能为空", { buttons: false, timer: 2000, }); } ...
收藏三款好看的信息弹出框
sunshijiazu的博客
06-08 5047
个人收藏系列
JavaScript 练手小技巧：HTML5 的 dialog 标签制作对话框
九天翔龙的技术博客
02-07 8602
对话框，在应用中常常用来做（如，登录、删除信息等）。
H5弹出提示层-上下左右居中
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
05-31 771
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>H5弹出提示层-上下左右居中
H5的全屏变暗 弹出框样式
不积跬步无以至千里
11-25 991
LIGHTBOX EXAMPLE      .black_overlay{  display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80
点击图片时，出现遮雾罩并放大图片。
weixin_30558305的博客
07-16 492
hovertreeshow.css .hovertreeshowcover { position:fixed; z-index:99; width:100%; height:100%; background-color:silver; top:0px; left:0px; opacity:0.5; } .hovertreeshowlayer ...
html弹窗页面19种
02-09
html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种
基于HTML5 Canvas 实现弹出框效果
09-28
在本文中，我们将探讨如何利用HTML5 Canvas 实现弹出框效果，这对于那些需要在Canvas画布上展示附加信息的应用场景非常重要。 传统的HTML元素实现弹出框相对简单，但Canvas是一个统一的画布，所有绘制的图形都是其...
js实现遮罩层弹出框的方法
10-24
主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义、按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
基于jQuery实现弹出可关闭遮罩提示框实例代码
10-21
主要介绍了基于jQuery实现弹出可关闭遮罩提示框实例代码的相关资料
关闭浏览器窗口弹出提示框并且可以控制其失效
09-04
主要介绍了关闭浏览器窗口时弹出提示框，并且可以通过函数控制其失效,需要的朋友可以参考下
JS实现新浪微博效果带遮罩层的弹出框代码
10-23
主要介绍了JS实现新浪微博效果带遮罩层的弹出框代码,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Html网页打开自动弹出显示内容或图片
小栋哟
05-19 1751
直接复制到要弹出的页面就可。
JS实现弹出框提示5秒后弹出框消失
05-13
可以使用JavaScript中的setTimeout函数来实现这个功能。具体实现步骤如下： 1. 创建一个弹出框，并设置其样式和内容。 2. 使用setTimeout函数设置一个定时器，让弹出框在5秒后消失。 3. 当定时器时间到达时，移除弹出框。 下面是示例代码： HTML部分： ``` <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一个弹出框提示！</p> </div> </div> ``` CSS部分： ``` .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 30%; } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } ``` JavaScript部分： ``` // 获取弹出框元素 var modal = document.getElementById("myModal"); // 获取关闭按钮元素 var span = document.getElementsByClassName("close")[0]; // 点击关闭按钮时隐藏弹出框 span.onclick = function() { modal.style.display = "none"; } // 5秒后自动隐藏弹出框 setTimeout(function() { modal.style.display = "none"; }, 5000); // 显示弹出框 modal.style.display = "block"; ``` 注意：上述代码只是一个简单的实现，实际应用中需要根据具体需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值