html 弹出框/遮罩

最新推荐文章于 2024-04-28 17:05:59 发布
最新推荐文章于 2024-04-28 17:05:59 发布
阅读量997 收藏
点赞数
分类专栏： html 文章标签： html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>LIGHTBOX EXAMPLE</title>  
<style>  
* {  
 margin:0;  
 padding:0  
}  
html, body {  
 height: 100%;  
 width: 100%;  
 font-size:12px  
}  
.white_content {  
 display: none;  
 position: absolute;  
 top: 25%;  
 left: 25%;  
 width: 50%;  
 padding: 6px 16px;  
 border: 12px solid #D6E9F1;  
 background-color: white;  
 z-index:1002;  
 overflow: auto;  
}  
.black_overlay {  
 display: none;  
 position: absolute;  
 top: 0%;  
 left: 0%;  
 width: 100%;  
 height: 100%;  
 background-color:#f5f5f5;  
 z-index:1001;  
 -moz-opacity: 0.8;  
 opacity:.80;  
 filter: alpha(opacity=80);  
}  
.close {  
 float:right;  
 clear:both;  
 width:100%;  
 text-align:right;  
 margin:0 0 6px 0  
}  
.close a {  
 color:#333;  
 text-decoration:none;  
 font-size:14px;  
 font-weight:700  
}  
.con {  
 text-indent:1.5pc;  
 line-height:21px  
}  
</style>  
<script>  
function show(tag){  
 var light=document.getElementById(tag);  
 var fade=document.getElementById('fade');  
 light.style.display='block';  
 fade.style.display='block';  
 }  
function hide(tag){  
 var light=document.getElementById(tag);  
 var fade=document.getElementById('fade');  
 light.style.display='none';  
 fade.style.display='none';  
}  
</script>  
</head>  
<body>  
<a href="javascript:void(0)" οnclick="show('light')">打开1</a>  
<a href="javascript:void(0)" οnclick="show('light2')">打开2</a>  
<div id="light" class="white_content">  
      <div class="close"><a href="javascript:void(0)" οnclick="hide('light')"> 关闭</a></div>  
      <div class="con">   
      内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容   
      </div>  
</div>  
<div id="light2" class="white_content">  
      <div class="close"><a href="javascript:void(0)" οnclick="hide('light2')"> 关闭</a></div>  
      <div class="con">   
      内容2   
      </div>  
</div>  
<div id="fade" class="black_overlay"></div>  
</body>  
</html>  

yzcn2013
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的弹窗遮罩实现
m0_61123456的博客
02-14 858
HTML代码，mask是一个带黑色背景的遮罩层。 <!-- 删除提示框 --> <div class="mask"></div> <div class="tipDel"> <p class="tips">确定要删除该商品吗?</p> <p class="chearfix"> <a class="f1 cer" hre
html遮罩实现
机智的豪哥专栏
07-19 3640
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style type="text/css"> /* 半透明的遮罩层 */ ...
漂亮的html弹出层弹出窗口
09-20
漂亮的弹出层，弹出窗口的jquery方法，forZDialogDemo.html为演示页面，为普通的html开发提供便利，非常方便，漂亮，适用于各种浏览器，兼容性好
(css)原生html实现遮罩层弹窗
nyf_unknow的博客
07-21 1876
【代码】(css)html实现遮罩层。
前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。
最新发布
nibabaoo的博客
04-28 864
HTML中的标签，浏览器的原生弹框。
HTML + DIV +JS 实现弹窗加遮罩层
qq_45224062的博客
05-12 848
【代码】HTML + DIV +JS 实现弹窗加遮罩层。
html：自定义遮罩层弹窗（居中）
好幸运
07-15 992
一、html代码html <div v-if="maskVisible" class="mask_layer"> <div class="dialog_div"> <div style="display: flex; justify-content: center; align-items: center;width: 100%;height: 100%;"> 内容 </div> </div&.
jQuery+css+html实现页面遮罩弹出框
10-27
面遮罩弹出框已经不是一个陌生的话题了，实现的方法大同小异多种多样，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,感兴趣的朋友可以参考下哈
html5 css3简单的遮罩弹出框动态效果
09-22
html5 css3简单的遮罩弹出框动态效果
html弹出框+遮罩层
04-17
看到网上有很多伙伴在求这东西，这里发一个。
弹出窗口并且此窗口带有半透明的遮罩层效果
09-04
在网页设计中，创建弹出窗口并添加半透明遮罩层是一种常见的交互效果，它可以用于显示重要的信息或者用户需要关注的对话框。本教程将详细解释如何通过HTML、CSS和JavaScript来实现这样一个功能。 首先，我们需要...
移动端底部弹框js及css
11-08
这是一份移动端手机底部弹框的css以及js，还有部分js及前端代码在我的博客里，你可以直接进入我的博客主页查找，或者在csdn中搜索：移动端手机底部弹框查找
如何在html上做弹框效果,网页|利用提示框（Tooltip）实现弹窗效果
weixin_39525243的博客
06-04 2304
一、提示框的运用二、Tooltip简单介绍提示工具(Tooltip)是一个插件，可以根据需求生成标记内容，但在默认情况下是把提示工具(tooltip)放在它们的触发元素后面。在bootstrap中可以用data-toggle="tooltip"的方法实现效果。如下是tooltip的一些常见方法和属性：图2.1 常见方法图2.2 常用属性三、制作步骤(1)利用data-toggle="tooltip...
H5遮罩层+弹窗实例（超详细）
weixin_45759427的博客
11-30 3853
遮罩层+弹窗全套实例，包括jq点击事件及禁止屏幕滑动 适合新手小白学习理解 HTML代码 <!-- 遮罩层 --> <div class="maskLayer"> <!-- 弹窗 --> <div class="popup"> <div class="btn-close">关闭弹窗</div> </div> </div> <!-- 内容 --> <d
收藏三款好看的信息弹出框
sunshijiazu的博客
06-08 4944
个人收藏系列
html遮罩弹窗原理,带遮罩层的弹窗.html
weixin_34501965的博客
05-30 565
button{display: block;margin: auto;width: 100px;height: 50px;}.tanchuang{position: fixed;width: 500px;height: 200px;top: calc(50% - 100px);left: calc(50% - 250px);background-color: #FFFFFF;border: #eb...
html中的遮罩弹出框动态效果代码,JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】...
weixin_35811662的博客
06-03 356
本文实例讲述了JavaScript实现的弹出遮罩层特效。分享给大家供大家参考，具体如下：这篇给大家分享一个简单的遮罩层特效，先上效果图。代码：查看，修改，删除table{width:500px;border:1px solid blue;border-collapse: collapse;}table th{border:1px solid blue;height:30px;}table td{b...
如何实现html遮罩层以及弹出框?
闫小样丶的博客
08-28 1592
我们在做PC端项目的时候，经常会写弹出框遮罩的提示内容。所以为了方便以后的使用，在这里对此做一个总结。 HTML: <!-- 遮罩弹框 --> <div id="fullbg"></div> <div id="dialog"> <p class="close"><a href="#" onclick="closeBg();">X</a></p> <!-- 此处写弹出框中需要添加的内
如何用html设置弹框遮罩禁止页面滚动
yunduanaoligei的博客
09-07 2945
本文关键讲解了如何用html设置弹框遮罩禁止页面滚动，原文中根据实例编码详细介绍的特别详尽，对我们的培训或是工作中具备一定的参照学习培训使用价值，必须的朋友下边伴随着笔者来一起学习学吧 前端工程师常常会碰到的一个难题便是制做一个弹框来向客户信息提示，在这个弹框弹出来的与此同时，通常会伴随一个灰色的遮罩层遮挡页面內容，与此同时全部页面被这层遮罩遮住，不能点一下也不能滚动。 如何用html设置弹框遮罩禁止页面滚动_前端 方案一：控制overflow禁止滚动（ios不兼容） 要制作这个效果在PC端非常简单，只需要
HTML弹出框代码实现
05-26
HTML弹出框通常使用JavaScript来实现。以下是一个简单的HTML弹出框代码示例： ```html <!DOCTYPE html> <html> <head> <title>HTML弹出框</title> <style> /* 弹出框样式 */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */ z-index: 1; /* 保证弹出框在最上层 */ } .modal-content { background-color: #fefefe; /* 弹出框背景色 */ margin: 15% auto; /* 居中显示 */ padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; /* 最大宽度 */ box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* 阴影效果 */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>HTML弹出框示例</h2> <!-- 触发弹出框的按钮 --> <button onclick="openModal()">打开弹出框</button> <!-- 弹出框内容 --> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeModal()">×</span> <p>这是一个弹出框示例。</p> </div> </div> <script> // 获取弹出框元素 var modal = document.getElementById("myModal"); // 打开弹出框 function openModal() { modal.style.display = "block"; } // 关闭弹出框 function closeModal() { modal.style.display = "none"; } </script> </body> </html> ``` 在上面的示例中，我们创建了一个类名为“modal”的div元素，用于显示弹出框的背景及遮罩效果。同时，我们还创建了一个类名为“modal-content”的div元素，用于显示弹出框的具体内容。通过JavaScript，我们可以控制弹出框的显示和隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值