html+css实现一个弹出框

最新推荐文章于 2024-05-28 15:11:32 发布

睡觉数羊羊

最新推荐文章于 2024-05-28 15:11:32 发布

阅读量1.4w

点赞数 7

分类专栏：小练习文章标签： html+css

本文链接：https://blog.csdn.net/weixin_39330590/article/details/89042023

版权

小练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图如下：
弹出框实现了对浏览器窗口的水平垂直居中
html代码如下(命名为：dialog.html):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="dialog.css" type="text/css">
    </head>
    <body>
        弹窗练习
        <div class="dialog">
            <p class="header">提示文字</p>
            <div class="footer">
                <button class="cancel">取消</button>
                <button class="confirm">确认</button>
            </div>
        </div>
    </body>
</html>

css代码如下（命名为：dialog.css）：

body{
    background-color: rgba(0,0, 0, 0.8);/*设置透明度为0.8，以突出遮罩效果*/
}
.dialog{
    background-color: rgba(255,255, 255, 1);
    width: 20%;
    height: 100px;
    border-radius: 5px;
    z-index: 1;/*优先*/
    text-align: center;
    /* 实现对浏览器窗口的垂直居中 */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
/* 弹出框的提示文字部分 */
.header{
    height: 60%;
    line-height: 60px;
    margin: 0 auto;
}
/* 弹出框的两个按钮部分 */
.footer{
    height: 40%;
    display: flex;
    flex-direction: row;
}
/* 取消和确认按钮的设置 */
.confirm,.cancel{
    outline: none;
    background-color: white;
    width: 50%;
}
.confirm{
    border-width: 1px 0px 0px 1px;
    border-bottom-right-radius:5px; 
}
.cancel{
    border-width: 1px 0px 0px 0px;
    border-bottom-left-radius:5px; 
}

睡觉数羊羊

关注

7
点赞
踩
47

收藏

觉得还不错? 一键收藏
0
评论
html+css实现一个弹出框

效果图如下：html代码如下(命名为：dialog.html):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="dialog.css" type="text/css"> ...
复制链接

扫一扫