我应该如何将我的非引导模式居中？

Posted 2023-05-08

【中文标题】我应该如何将我的非引导模式居中？

【英文标题】：How should i center my non bootstrap modal?

【发布时间】：2021-06-01 20:10:47

【问题描述】：

我希望将我的非引导模式垂直和水平居中。

我该怎么做？

我已经给出了我用过的 html CSS 和 JS 代码。

我现在刚刚输入了随机文本。实际上会有一个注册表单。

这是我所有的模态代码：

<!-- The Modal -->
    <div id="myModal" class="modal center">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
          <p>Some text in the Modal Body</p>
          <p>Some other text...</p>
        </div>
        <div class="modal-footer">
          <h3>Modal Footer</h3>
        </div>
      </div>
    </div>

/* The Modal (background) */
.modal 
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(255, 255, 255, 0.7); /* Black w/ opacity */


/* Modal Content/Box */
.modal-content 
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */


/* The Close Button */
.close 
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;


.close:hover,
.close:focus 
  color: black;
  text-decoration: none;
  cursor: pointer;

/* Modal Header */
.modal-header 
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;


/* Modal Body */
.modal-body padding: 2px 16px;

/* Modal Footer */
.modal-footer 
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;


/* Modal Content */
.modal-content 
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s


/* Add Animation */
@keyframes animatetop 
  from top: -300px; opacity: 0
  to top: 0; opacity: 1

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() 
  modal.style.display = "block";


// When the user clicks on <span> (x), close the modal
span.onclick = function() 
  modal.style.display = "none";

【参考方案1】：

由于它是一个fixed 定位元素，您可以使用transform: translate(-50%, -50%); 技巧：

/* The Modal (background) */

#blanket 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
  /* Black w/ opacity */


.modal 
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* Full width */
  height: 250px;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */



/* Modal Content/Box */

.modal-content 
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */



/* The Close Button */

.close 
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;


.close:hover,
.close:focus 
  color: black;
  text-decoration: none;
  cursor: pointer;



/* Modal Header */

.modal-header 
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;



/* Modal Body */

.modal-body 
  padding: 2px 16px;



/* Modal Footer */

.modal-footer 
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;



/* Modal Content */

.modal-content 
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation-name: animatetop;
  animation-duration: 0.4s



/* Add Animation */

@keyframes animatetop 
  from 
    top: -300px;
    opacity: 0
  
  to 
    top: 0;
    opacity: 1
  

<div id="blanket">
  <div id="myModal" class="modal center">
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>Modal Header</h2>
      </div>
      <div class="modal-body">
        <p>Some text in the Modal Body</p>
        <p>Some other text...</p>
      </div>
      <div class="modal-footer">
        <h3>Modal Footer</h3>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢，但有什么办法可以让整个背景稍微变白。我想要这种颜色的背景：rgba(255, 255, 255, 0.7) 它在原始代码中正确发生。现在有了这段代码，它就不能正常发生了。

rgba(255, 255, 255, 0.7 是白色，在示例中。尝试将其更改为red 或blue 之类的内容，您可以看到背景正在运行。也许您项目中的其他一些风格正在覆盖它？

背景只是不在整个屏幕上。它以条带形式出现在页面中心。

@KavieshAgarwaal 我认为您需要通常称为毯子/覆盖元素的东西......我刚刚用一个更新了示例

实际上我刚刚使用 javascript 解决了这个问题，但是如何将 div 放在其他人的前面？