css 弹窗自动垂直/水平居中；高度自适应

最新推荐文章于 2023-11-13 08:40:46 发布

qq_41737172

最新推荐文章于 2023-11-13 08:40:46 发布

阅读量681

点赞数

本文链接：https://blog.csdn.net/qq_41737172/article/details/118565746

版权

对话框输入验证 Element UI 确认按钮返回操作

关键词由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div tabindex="-1" role="dialog" aria-modal="true" aria-label="dialog" class="el-message-box__wrapper">
    <div class="el-message-box">
      <div class="el-message-box__header">
        <div class="el-message-box__title">
          <span>应急响应</span>
        </div>
        <button type="button" aria-label="Close" class="el-message-box__headerbtn" @click="closeAlertwindow">
          X</button>
      </div>
      <div class="el-message-box__content">
        <div class="el-message-box__container">
          <div class="el-message-box__message">
            <h4>请输入:</h4>
            <input type="text" placeholder="请输入内容"></el-input>
          </div>
          <div class="el-message-box__message">
            <h4>请输入:</h4>
            <input type="text" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
      <div class="el-message-box__btns">
        <button type="button" class="el-button el-button--default  " @click="closeAlertwindow">
          <span>返回</span>
        </button>
        <button type="button" class="el-button el-button--default  el-button--primary " @click="getAlertvalue">
          <span> 确定</span>
        </button>
      </div>
    </div>
  </div>
</body>
<style>
  .el-message-box__wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
  }

  .el-message-box__wrapper::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  .el-message-box {
    display: inline-block;
    width: 420px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    font-size: 18px;
    -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    text-align: left;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .el-message-box__header {
    position: relative;
    padding: 15px 15px 10px;
  }

  .el-message-box__headerbtn {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    border: none;
    outline: 0;
    background: 0 0;
    font-size: 16px;
    cursor: pointer;
  }

  .el-message-box__content {
    padding: 10px 15px;
    color: #606266;
    font-size: 14px;
  }

  .el-message-box__btns {
    padding: 5px 15px 0;
    text-align: right;
  }
</style>

</html>

qq_41737172

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 弹窗自动垂直/水平居中；高度自适应

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document..
复制链接

扫一扫