HTML中DIV提示框的实现

最新推荐文章于 2021-06-25 18:53:20 发布
最新推荐文章于 2021-06-25 18:53:20 发布
阅读量1k 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_16353/article/details/82653930
版权
[align=center]HTML中DIV提示框的实现[/align]

点击网页中某个按钮时，会弹出一个对话框，自定义提示框的样式和内容。
[b]HTML代码：[/b]
<!DOCTYPE html>
<html>
<head></head>
<body>
[color=green]<!--页面其他内容-->[/color]
<button class="btn" οnclick="show_popup_input()"></button>
[color=green]<!—提示框底层蒙版 -->[/color]
<div class="mask"></div>
[color=green]<!-- 提示框-->[/color]
<div class="bomb_box">。。。。。</div>
</body>
</html>
[b]JS代码：[/b]
[color=green]//展示隐藏的DIV块[/color]
function show_popup_input(){
$(".mask").show();
$(".bomb_box").show();
}
[b]CSS代码：[/b]
[color=green]/*蒙版，使底层页面无法执行任何操作*/[/color]
.mask{
display:none; [color=green]/*设置蒙版为隐藏元素*/[/color]
[color=green]/*绝对定位，设置蒙版在页面的位置*/[/color]
position:absolute;
top:0;
left:0;
[color=green]/*设置蒙版的大小为整个页面*/[/color]
width:100%;
height:100%;

background:#fff;
z-index:10;
[color=green]/*设置DIV元素的不透明级别*/[/color]
opacity:0.4;
}
[color=green]/*提示框*/[/color]
.bomb_box {
display:none; [color=green]/*设置提示框为隐藏元素*/[/color]
[color=green]/*绝对定位，设置提示框在页面的位置*/[/color]
position:absolute;
top:320px;
left:500px;

background:#fff;
z-index:20;
}
[color=red]注意：提示框的z-index>蒙版的z-index>body内其他元素的z-index。[/color]
iteye_16353
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html div边框左上角,纯CSS实现边上带小三角的div提示框
weixin_33586063的博客
06-10 2763
目标用css的方式实现如下图样式的提示框解决方案考虑以多个部件组装的方式实现。分为矩形提示框和边上的小三角形。矩形提示框，就是普通的div。自不用说。问题的关键就是如何画出小三角形。这时应该想到很多方案，比如用一个小图片表示，或者用svg路径表示，再或者用canvas的画图方法实现等等。但是本文讲的是一种非常规方法，完全靠css的方式实现出这个小三角形。采用css的border属性实现。如果不理解...
html 消息框 div,div+css实现带三角箭头提示框_html/css_WEB-ITnose
weixin_34365042的博客
06-04 739
带三角箭头的提示框，就是下面所示：这是一个提示框通常我们都用图片来实现上面那个小三角，因为这样方便快速，但是如果图片处理得不好，会看起来有杂边，从而影响视觉，所以换一种思路来解决。首先来研究一下CSS是如何实现三角形的。假定有一个盒子(div)，给定宽高分别为100像素，再给定边框50像素，那么它看起来会是下面这个样子(为了更直观，给了边框四种不同的颜色)：接下来，把盒子的高度设为0：再把宽度也设...
html中弹出框中加div,用DIV+CSS弹出层回实现弹窗功能
weixin_34570241的博客
06-02 753
当前位置:我的异常网» HTML/CSS»用DIV+CSS弹出层回实现弹窗功能用DIV+CSS弹出层回实现弹窗功能www.myexceptions.net网友分享于：2013-09-07浏览：118次用DIV+CSS弹出层来实现弹窗功能用window.open()，还是用window.showdialog弹出对话框都回被浏览器拦截，但是用DIV+CSS得方式实现，可以防止被拦截，于是再...
html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
weixin_39531378的博客
06-17 1645
div对话框,js+div+css实现好看的提示框效果(转)(2012-02-18 20:46:23)标签：htmldivcss杂谈提示窗都越来越人性化了，呵呵，有的时候老板就和你要那么一个框，没办法，急的你焦头烂额，怎么也不知道那个框框是怎么弄出来的，确实，看似简单的一个提示框，背后写的代码却有些复杂，今天周末我就抽时间把这个提示框功能加一个详细的注释发布上来，以供网友们参考。html代码很简单...
html页面悬浮提示框,js实现页面悬浮框
weixin_29248611的博客
06-04 4511
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...
html边框有箭头,DIV+CSS通过border样式制作带箭头提示框效果
weixin_32282271的博客
06-15 966
带箭头样式的提示框，在很多的网站上都能见到这样的效果。通过自己动手写出来，觉得也不是什么难事。其实这个效果都是通过CSS中一个border样式就能做出来。归纳一下实现这个效果主要会用到border的这几个样式：border-style:边框的样式border-color:边框的颜色border-width:边框的宽度先实现这样的一个效果，看了就明白是怎么回事了：这段代码为：复制代码代码如下:pos...
html如何做多边形边框,纯css构造多边形div
weixin_42227736的博客
06-25 1295
设计师画的方案里有如下的图形：如果只是一个简单的五边形，可以用css shape去做。仔细分析图形，发现它实际上是3个五边形的叠加：1. 最外面一层浅蓝色的稍大一些，2. 中间一层深蓝色颜色和背景相同，但尺寸略小，盖在下面那层上，由此而产生了一个边框的效果，3. 最里面的五边形颜色最深。所以一共是这么3层形状差不多的五边形。我最开始的想法是先画一个深蓝色的矩形，然后用背景色做一个小三角形盖在右下角...
html方框内文字溢出处理,html 解决div中文字内容溢出问题
weixin_30301989的博客
06-03 2424
这篇文章主要为大家详细介绍了html 解决div中文字内容溢出问题，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！由于文字内容的长度不确定性和页面布局的固定性，常常会遇到文字溢出的状况，有一下解决方法：1：规定文字父容器的宽高，设置超出隐藏：overflo：“hidde”-------缺点是会经常遇到最后一行文字显示不全的情况，建议在只控制一行文...
HTML实现友好提示框(带尖角的框)
热门推荐
lidelin10的博客
08-12 1万+
友好提示框的主要实现难点就是哪个尖角的问题，其实只要搞清楚三角形的实现原理，实现这种效果也并不难，下面介绍两种实现方法，一种是通过边框实现的三角形通过叠加实现，另一种是通过正方形旋转实现 首先我们讲述一下如何通过边框实现三角形,首先现创建一个div元素，设置宽高为0。 .tri{ width:0px; height:0px; } &lt;div class="tri"&g...
JS使用cookie实现DIV提示框只显示一次的方法
11-25
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法。分享给大家供大家参考，具体如下： 这里运用JavaScript的cookie技术，控制网页上的提示DIV只显示一次，也就是当用户是第一次打开网页的时候才显示，第二...
DIV+CSS实现带三角箭头的提示框
12-09
实现效果 实现代码 CSS Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" href="resources/img/logo-color.png" ...
CSS实现的div悬浮框并且兼容IE6的样式
09-25
在网页设计中，有时我们需要创建一个“悬浮框”（Floating Box），它能在用户滚动页面时始终保持在屏幕的某个位置，这种效果通常用于侧边栏、导航菜单或提示信息。本篇将详细介绍如何使用CSS实现一个兼容IE6的div...
html 弹出div实现移动居中非常好用
12-14
本示例中，我们将探讨如何使用HTML和CSS来实现一个弹出div的居中显示，同时适应不同浏览器的兼容性问题。 首先，HTML的基础结构如下： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
div元素按比例缩放的实现方法
iteye_16353的博客
09-08 9599
[align=center][size=large]div元素按比例缩放的实现方法[/size][/align] 某些场景下，窗口宽度缩放时，使得元素宽度自适应的同时，保证每个元素的宽高比例不变。 [b]1.1利用CSS属性实现——padding-bottom属性[/b] padding-bottom 有一个特性是当它的值是百分比形式时，百分比的基数是其所在元...
HTML行内元素和块级元素的转换
iteye_16353的博客
10-07 1707
[size=large][align=center]HTML行内元素和块级元素的转换[/align][/size] [b]1.1 CSS display属性[/b] 行内→块级，display:block; 块级→行内，display:inline; [b]1.2 CSS position:absolube;属性[/b] 使行内元素转换为隐...
设置input输入框为只读方法详解
iteye_16353的博客
07-18 1546
[align=center]设置input输入框为只读方法详解[/align] [b]1.1禁用状态与启用状态[/b] 一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。一个元素可以被激活或获取焦点，则该元素处于启用状态。 [b]1.2设置input输入框为只读方法[/b] 设置文本框为只读，使用户不能修改其中的信息。 例： ...
HTML img布局问题详解
iteye_16353的博客
09-08 1336
[align=center][size=large]HTML img布局问题详解[/size][/align] [b]1.1尺寸的设置 1.1.1设置方法[/b] 对于一个img元素，可单独地修改 width或者 height 属性来设置大小，同时图片的比例保持不变。即设置宽度为原来的一半时，图片的高度并不是保持原来的大小，而是相应的变成了原来的一半，从而使得图片仍能够保持原有...
html <a>锚文本超链接标签
iteye_16353的博客
05-03 1111
[align=center]html 锚文本超链接标签[/align] [b]1.1超链接概述[/b] 超链接指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。 注意：超链接默认情况下是自动加下划线的。 [b]1.2 ht...
div+css实现圆形div以及带箭头提示框效果
最新发布
06-06
要实现圆形 div 可以使用 CSS 的 border-radius 属性，将其设置为 50% 即可。例如： ```css .circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; } ``` 要实现带箭头的提示框效果，可以使用 CSS 的伪元素和绝对定位来实现。例如： ```html <div class="tooltip">Hover me <span class="tooltiptext">This is a tooltip</span> </div> ``` ```css .tooltip { position: relative; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } ``` 这里使用了 `::after` 伪元素来实现箭头，通过设置边框颜色来实现三角形的效果。同时，通过设置父元素的 `position: relative` 和子元素的 `position: absolute` 来实现子元素相对于父元素的定位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值