三种CSS方式实现弹出窗口（popup window）

最新推荐文章于 2024-09-19 18:04:51 发布
最新推荐文章于 2024-09-19 18:04:51 发布
阅读量1w 收藏 10
点赞数 4
分类专栏： 前端 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cassy_Wu/article/details/104434590
版权
本文介绍了三种使用CSS实现弹出窗口（popup window）上下居中布局的方法：1) 使用display: flex; 2) 使用position: absolute + margin负值; 3) 使用position: absolute + transform: translate(-50%, -50%)。文章指出，这些方法同样适用于保持元素始终居中，并推荐使用display: flex;的方式，因为其简洁易懂。" 125465848,14643086,SECS/GEM软件开发与应用指南,"['SEMI标准', '设备通讯', '软件开发', 'SECS协议', '硬件接口']
摘要由CSDN通过智能技术生成

目录

1. 使用display: flex；进行上下居中布局

在容器里面添加以下几行css语句

 display: flex; 
 justify-content: center; 
 align-items: center;

注意： 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 9999px; //模仿内容很长的页面
        }
        .popup__wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .popup {
            box-sizing: border-box;
            width: 670px;
            height: 300px;
            background: #fff;
            text-align: center;
            padding: 70px 10px 20px 10px;
            border-radius: 4px;
        }
        .popup__title{
            font-size: 30px;
            font-weight: 600;
            color: #004165;
            margin-bottom: 20px;
        }
        .popup__btnWrapper {
            width: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .popup__text{
            font-size: 20px;
            margin-bottom: 50px;
        }
        button{
            width: 154px;
            cursor: pointer;
            border-radius: 4px;
            line-height: 45px;
            font-weight: 600;
        }
        .popup__yesBtn {
            color: #fff;
            background-color: #007dba;
            border: 1px solid #006ba1;
        }
    </style>
</head>
<body>
    <div class="popup__wrapper">
        <div class="popup">
            <div class="popup__title">Confirmation</div>
            <div class="popup__text">Are you sure you want to do this action?</div>
            <div class="popup__btnWrapper">
                <button class="popup__yesBtn">Yes</button>
                <button class="popup__noBtn">No</button>
            </div>
        </div>
    </div>
</body>
</html>

2. 使用position:absolute + margin:负值

在需要上下左右居中的元素里添加以下几行css语句：
绝对定位，top和left 为 50%， margin的left和top为自身宽高一半

	position: absolute;
	width: 670px;
	height: 300px;
	left: 50%;
	margin-left: -335px; // width的一半
	top: 50%;
	margin-top: -150px; //height的一半

同理也可以用calc来计算
绝对定位，top和left 为 父元素的一半减自身一半

	position: absolute;
	top: calc(50% - 150px);
	left: calc(50% - 335px);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 9999px; //模仿内容很长的页面
        }
        .popup__wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .popup {

            box-sizing: border-box;
            position: absolute;
            width: 670px;
            height: 300px;
            background: #fff;
            left: 50%;
            margin-left: -335px;
            top: 50%;
            margin-top: -150px;
            text-align: center;
            padding: 70px 10px 20px 10px;
            border-radius: 4px;
        }
        .popup__title{
            font-size: 30px;
            font-weight: 600;
            color: #004165;
            margin-bottom: 20px;
        }
        .popup__btnWrapper {
            width: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .popup__text{
            font-size: 20px;
            margin-bottom: 50px;
        }
        button{
            width: 154px;
            cursor: pointer;
            border-radius: 4px;
            line-height: 45px;
            font-weight: 600;
        }
        .popup__yesBtn {
            color: #fff;
            background-color: #007dba;
            border: 1px solid #006ba1;
        }
    </style>
</head>
<body>
    <div class="popup__wrapper">
        <div class="popup">
            <div class="popup__title">Confirmation</div>
            <div class="popup__text">Are you sure you want to do this action?</div>
            <div class="popup__btnWrapper">
                <button class="popup__yesBtn">Yes</button>
                <button class="popup__noBtn">No</button>
            </div>
        </div>
    </div>
</body>
</html>

3. 使用position:absolute + transform: translate(-50%, -50%);

在需要上下左右居中的元素里添加以下几行css语句：
同方法二的原理一样，在absolute以后，往x, y轴方向移动width, height的一半

	position: absolute;
	width: 670px;
	height: 300px;
	left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 9999px; //模仿内容很长的页面
        }
        .popup__wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .popup {

            box-sizing: border-box;
            position: absolute;
            width: 670px;
            height: 300px;
            background: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 70px 10px 20px 10px;
            border-radius: 4px;
        }
        .popup__title{
            font-size: 30px;
            font-weight: 600;
            color: #004165;
            margin-bottom: 20px;
        }
        .popup__btnWrapper {
            width: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .popup__text{
            font-size: 20px;
            margin-bottom: 50px;
        }
        button{
            width: 154px;
            cursor: pointer;
            border-radius: 4px;
            line-height: 45px;
            font-weight: 600;
        }
        .popup__yesBtn {
            color: #fff;
            background-color: #007dba;
            border: 1px solid #006ba1;
        }
    </style>
</head>
<body>
    <div class="popup__wrapper">
        <div class="popup">
            <div class="popup__title">Confirmation</div>
            <div class="popup__text">Are you sure you want to do this action?</div>
            <div class="popup__btnWrapper">
                <button class="popup__yesBtn">Yes</button>
                <button class="popup__noBtn">No</button>
            </div>
        </div>
    </div>
</body>
</html>

同样以上三种方法也适用于你想把一个元素始终上下左右居中的情况。举一反三嘛。个人推荐方法一， 三。
以上的代码都可以创建一个html文件，直接查看效果。

今天在审核同事代码的时候他在实现弹出窗口，成片的position:absolute； fix。很混乱。所以我想把我平时用的实现方法写出来。希望有一天能帮助到需要的人。

如果有任何错误或者还有可以改进的地方，欢迎评论指导。在此感谢。

Cassy_Wu
关注
专栏目录
jQuery实现弹出窗口弹出div层的实例代码
10-20
在IT行业内，掌握使用jQuery实现特定功能的代码是一项必备技能，本实例将详细介绍如何利用jQuery实现点击链接弹出一个div层的同时，使页面的其他部分变灰并不可交互，且该弹出层能够在浏览器窗口大小改变或滚动条...
纯css实现自定义弹窗
m0_60633107的博客
11-15 7238
只是用css去实现自定义弹窗功能，理解思路和简单代码
css自学框架之消息弹框
zhaoyang314的博客
08-30 1841
一、CSS部分，这部分主要是定义样式，也就是我们看到的外表；二、JavaScript部分，这部分我们主要实现单击按钮显示根据不同输入，显示不同消息弹框，功能包括自动关闭消息弹框和手动关闭消息弹框；样式包括红色、黄色、蓝色、绿色和黑色五种消息弹框。三、HTML部分，该部分就是如何使用第一、二部分的代码
HTML+CSS弹窗样式代码参考
最新发布
2302_81102200的博客
09-19 507
电脑的比这个要宽，占屏幕80%，这里就不做展示了。
css web页面实现一个弹窗
且听风吟的博客
07-13 3653
css web页面实现一个弹窗
html css 弹窗效果展示
weixin_42517226的博客
12-12 672
【代码】html css 弹窗效果展示。
css实现弹窗效果
weixin_46347206的博客
09-02 4681
用css实现弹窗效果有三种情况： 情况一（代码如下）： <div className="alert_box"> <div className="alert_bg"></div> <div className="alert_con"> 情况一 </div> <div> .alert_box{ position:fixed; left:0; top:0; z-index:900; width:100%; heig
【css】使用css实现提示框各种弹出效果。
qq_2511276124的博客
04-14 3814
最近工作编写页面时，需要有一个提示框从下到上弹出的效果。 冥想了一下，实现了出来。 记录下实现思路。
18弹出窗口时出现动画效果.rar_弹出窗口时
09-20
首先，我们要明白弹出窗口（Popup Window）是应用程序中一种常见的交互形式，它用于显示临时信息或请求用户输入。在弹出窗口中加入动画，可以使用户体验更加生动有趣。这种动画效果可以是淡入淡出、滑动、缩放等多种...
23个Javascript弹出窗口特效整理
10-28
3. FonshenJSWindow：这是一个模拟WEB弹出窗口和对话框的方案，它基于JavaScript/XHTML/CSS标准实现。FonshenJSWindow支持高度自由的窗口样式定制，并且支持模拟的按钮编程模型，可以很好的模拟对话框。此外，它还...
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
12-11
通过调整CSS属性和添加JavaScript事件监听器，可以实现在任何浏览器窗口大小和滚动位置下保持弹出层的居中状态。这个技术在许多网页应用中都有广泛的应用，例如弹窗提示、模态对话框或者加载指示器。
百度的弹出窗口
09-20
在这里，我们将深入探讨JavaScript弹出窗口的原理、实现方式以及可能涉及到的`popup.js`和`PopupsUtil.js`这两个文件的角色。 首先，JavaScript弹出窗口通常通过以下几种方式创建： 1. `window.alert()`: 这个函数...
用HTML+CSS+JavaScript偷偷做一个浏览器里的弹窗吧！然后惊艳所有（不会做弹窗的）人！
qq_44001153的博客
05-09 2014
用简单的前端语言（HTML+CSS+JavaScript）写一个（不够优雅但能解决当务之急的）弹窗出来
CSS 居中定位的弹窗效果（源码超详细解释）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-14 3443
这是一个超详细的 CSS实现居中定位弹窗效果源码解析，如果看完这篇文章还没学明白，小编劝你趁年轻赶紧改行！ 弹窗一般有两种情况： 弹窗的尺寸是已知的（宽高都是固定的）； 弹窗尺寸是未知的（内容不固定，弹窗高度随内容改变）； 本篇文章会对这两种情况，各给出2种解决方法。每一种方法的实现源码解释都超详细！！
CSS里的整洁架构
IDEAL Garden
09-08 989
虽然开发工具早已经从 preprocessor 进化到了 styled component，但在我看来新的工具并没有让我们的样式代码写的更好，只是更快——也可能会让代码坏的更快。工具的繁荣并没有让那些导致代码难以维护的根本问题烟消云散，而是更易让我们对其视而不见。这篇文章旨在回答一个问题：为什么样式代码难以写对，它的陷阱究竟在哪里？
css弹窗动画效果，示例弹窗从底部弹出
m0_46978096的博客
12-07 2490
【代码】css弹窗动画效果，示例弹窗从底部弹出。
css3弹出层html,纯CSS实现弹出层
weixin_26886855的博客
06-07 581
css.modal-window {position: fixed;background-color: rgba(255, 255, 255, 0.25);top: 0;right: 0;bottom: 0;left: 0;z-index: 999;visibility: hidden;opacity: 0;pointer-events: none;transition: all 0.3s;}.m...
(css)原生html实现遮罩层弹窗
nyf_unknow的博客
07-21 2098
【代码】(css)html实现遮罩层。
css3 弹框功能样式
weixin_30596165的博客
10-26 114
.message-box{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; } .message-box, .message-box-main, .btn{ transition:...
JavaScript实现弹出窗口与拖放功能的代码示例
本文主要分享了一些实用的编程代码，包括弹出窗口的实现、...总结来说，这篇文章分享了前端开发中的三个实用技巧：弹出窗口的居中显示、拖放功能的实现以及异步文件上传的使用，这些都是前端开发中不可或缺的技术点。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值