javascript - 如何使模态对话框响应？更改窗口大小后，我的模式框就会崩溃

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        5个月前关闭。
                                                                                            
                
        
一旦更改浏览器窗口的大小，模态框的内容就会失去对齐。

的HTML

  <div class='modal'>
  <div class='modal-content'>
  </div>
  </div>

这是模式框的CSS

 .modal {
      display: none; /* Hidden by default */
      position: absolute; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      max-width: 100%;
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      padding-top: 60px;
    }

  .modal-content {
      background-color: #ffffff;
      margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and
      centered */
      border: 1px solid #888;
      width: 22%; /* Could be more or less, depending on screen size */
      height: 55%;
    }

最佳答案

像这样用视口单位（vw和vh）替换相对高度和宽度（％）：

.modal {
      display: none; /* Hidden by default */
      position: absolute; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100vw; /* Full width */
      max-width: 100vw;
      height: 100vh; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      padding-top: 60px;
    }

  .modal-content {
      background-color: #ffffff;
      margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and
      centered */
      border: 1px solid #888;
      width: 22vw; /* Could be more or less, depending on screen size */
      height: 55vw;
    }

这是一个有效的jsfiddle。

关于javascript - 如何使模态对话框响应？更改窗口大小后，我的模式框就会崩溃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57611573/