整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
时浏览网站的时候经常会遇到点击某些按钮会弹出登录提示或者注意事项提示的弹窗。那么这种弹窗是怎么实现的呢。实现方法有很多，不外乎就是点击事件触发相应的弹窗事件。
在这里介绍一个简易实现的方法。
首先，这里的弹窗长这样：
而原本页面长这样：
这里假定图中深绿色的按钮作为触发弹窗事件的按钮，在这里命名为btn1，然后就是弹窗的制作：
由图可看出，弹窗是基于整个屏幕的，有个灰色背景遮罩，中间有一块白色底带有图标文字说明的内容提示区，下面还有两个按钮，close是关闭弹窗的作用。了解了这些，就开始制作弹窗了：
1、html结构如下：
.tc{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background: rgba(0,0,0,.5);
display: none;
}
.tc .box{
width: 670px;
height: 404px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding-top: 54px;
}
.tc .box .icon{
width: 110px;
height: 110px;
margin: auto;
}
.tc .box .t1{
font-size: 18px;
line-height: 28px;
color: #333;
text-align: center;
box-sizing: border-box;
padding: 0 70px;
margin-top: 38px;
}
.tc .box .t2{
display: flex;
justify-content: center;
margin-top: 48px;
}
.tc .box .t2 .btn1{
width: 195px;
height: 40px;
border: none;
background: #1296db;
color: #fff;
font-size: 18px;
display: block;
cursor: pointer;
}
.tc .box .t2 .btn2{
width: 128px;
height: 40px;
border: none;
background: #295965;
color: #fff;
font-size: 18px;
display: block;
margin-left: 16px;
cursor: pointer;
}
由于在整个弹窗的父级div里加了隐藏属性：display:none; 所以在页面上是看不到弹窗的，这个时候就要开始写触发弹窗的点击事件了，上面假定的按钮是btn1，弹窗这块的父级div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
这样就写好之后点击 btn1 就能显示弹窗了，现在弹窗出现的效果有了，那么点击close关闭弹窗的效果也就不远了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在这里把close 的类名命名为 btn2， 如上代码就实现了点击close按钮关闭弹窗的功能。
将这两个事件放在一起，节省一个script，也显得美观些就是这样
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到这里一个建议的点击弹窗关闭的效果就实现了。
方的冬天最怕有风，空气虽然好了，但是异常的冷，吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题，看了几个网站发现很多网站的弹窗都是自定义的，而且还把弹窗周围的区域做成了半透明状，看上去非常不错。于是小白也准备自己通过css布局一个弹窗试试，一来以后肯定会用上这个功能，二来熟悉一下最近掌握的CSS+HTML布局。
说干就干，小白打开webStrom做起了弹窗的布局。他首先用一个容器layer作为弹窗的容器，然后里面放了窗口容器（dialog），窗口容器里面还包含了三个子容器，分别是标题（layerTitle）、内容区域（layerContent）、按钮区域（layerBTContainer）。
小白想：“layer要充满并遮挡整个浏览器窗口，而且滚动页面它还得一直保持遮挡的状态，把它设置为浮动类型（position:fixed）的容器最合适。里面的dialog需要保持在浏览器的最中心位置，因此最好把dialog设置成固定宽度和高度，这样可以很好的实现居中。”，于是小白先把layer和dialog以及dialog内部的容器设定了一个初步的CSS样式。
layer的position设置为fixed，上下左右距离都设置成0，就可以达到占用整个窗口。里面的dialog容器小白根据刚学习的CSS溢出法让dialog上下都居中。dialog如果是绝对定位，设置上下左右距离都为0它会占用整个父容器区域，但是如果CSS中限制了dialog的宽和高并且设置了marin为auto，它就会基于父容器居中。
为了测试transition属性，小白还把确定按钮上面设置了一个鼠标移上去以后渐变的效果，做完以后就是这个样子：
看到布局好的弹窗小白心里非常高兴，突然他想到一个问题，这个弹窗背景还没设置半透明，于是赶紧往layer上增加了opacity:0.5这个半透明属性，小白满怀信息的刷新了页面，当看到结果时小白发现背景和窗口都变成了半透明。
正好这时老朱从小白身边经过，随口跟小白说了一句：“小白，你是不是把窗口的父容器设置成半透明了？”
“是啊！父容器背景是黑色，所以我把父容器设置成了半透明！”
“可是父容器设置半透明会对他的子元素产生影响啊，这样会导致它里面的所有元素都变成半透明，你为啥不给窗口添加一个兄弟容器来实现这个效果呢？”
小白仔细想了想，说道：“哦！我明白了，我可以在layer容器里面放一个跟layer一样大的容器，这样就不会冲突了，我再试试！”
不一会小白找到老朱，说道：“我改好了，现在我给dialog添加了一个layerbg容器作为背景层，然后把layer之前的背景色和透明度去掉，放到了新增加的背景层上面，背景层高和宽与layer一样所以这样就不会把dialog也变成半透明了。你看看效果。”
老朱说：“嗯！不错，你现在通过HTML和CSS布局的这个弹窗还能做很多完善，比如出现弹窗时增加一个动画效果、给它添加一个关闭按钮或者取消按钮等等。除了提示功能以外，你现在做的这个还能再进行深入修改，把它变成可以输入文字的prompt框，点击确定以后可以对页面或者数据库数据进行修改。”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！
opover API 为开发者提供了一种声明式的方式来创建各种类型的弹窗。目前已在所有三大浏览器引擎中可用，并正式成为 Baseline 2024 的一部分。
一直以来，我们在实现弹出式菜单、提示框或信息卡片时，往往依赖于各种 JavaScript 库或者自定义 CSS 样式来完成。虽然这些方法有效，但它们通常伴随着代码冗余、兼容性问题。Popover API 正是为了简化这一过程而生，它为 Web开发者提供了一套标准化的方法来创建和控制弹出窗口，确保了跨浏览器的一致性和易用性。
Popover API 弹窗的一些特点如下：
使用 Popover API 创建一个最基础的弹窗非常简单，只需要一个button 按钮用于触发弹窗，和一个弹窗 div 元素。
实现代码如下：
<button popovertarget="my-popover">打开弹窗</button>
<div id="my-popover" popover>
<p>我是一个包含一些信息的弹窗。 按下 <kbd>Esc</kbd> 键或点击弹窗外部将我关闭<p>
</div>此时一个最简单的点击按钮显示弹窗功能就实现了。
演示效果如下：
通过 popover 属性制作弹窗，基础版 - 在线演示 https://bi.cool/bi/0b6c78K
其中属性 popover 如果不赋值，则等同于 popover="auto"。auto值表示启用点击弹窗外部则自动关闭弹窗。
如果设置popover="manual"，则点击弹窗外部不会再自动关闭弹窗，此时你将需要自定义关闭按钮来触发弹窗的关闭。
例如：
<button popovertarget="my-popover" class="trigger-btn">打开弹窗</button>
<div id="my-popover" popover=manual>
<p>我是一个包含一些信息的弹窗。按下❌按钮即可将我关闭<p>
<button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
</button>
</div>演示效果如下：
通过 popover 属性制作弹窗，自定义关闭按钮 - 在线演示 https://bi.cool/bi/5Bkfd32
此时，你会看到点击弹窗外部不会再自动关闭弹窗，点击自定义的关闭按钮才会关闭弹窗。
*请认真填写需求信息，我们会在24小时内与您取得联系。
