模態工作計算機上，但是當移動設備

-1

<style> 
    .modal-mask { 
     position: fixed; 
     z-index: 9998; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background-color: rgba(0, 0, 0, .5); 
     display: table; 
     transition: opacity .3s ease; 
    } 

    .modal-container { 
     width: 300px; 
     margin: 0px auto; 
     padding: 20px 30px; 
     background-color: #fff; 
     border-radius: 2px; 
     box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 
     transition: all .3s ease; 
     font-family: Helvetica, Arial, sans-serif; 
    } 

</style>

而下面HTML：

<div class="modal-mask" id = "answerEditor"> 
    <div class="modal-wrapper"> 
     <div class = "row"> 
      <div class="col-xs-6 col-xs-offset-4"> 
       <div class="panel panel-success"> 
        <div class="panel-heading"> 
         Answer editor to review 
        </div> 
        <div class="panel-body"> 
         modal body right here 
        </div> 

        <div class="panel-footer"> 
         <div class="row"> 
          <div class="col-md-12"> 
           Footer 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

當我在電腦上查看它時，上述工作正常，但是無論何時移動時，Modal都會一直浮到頂部，而不是集中在用戶視圖中。

任何可能出錯的想法？

我試過調整了很多CSS並且無處可得，而且我無法檢查移動版本和計算機之間的CSS差異。

編輯上面的代碼使用的引導，以及：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

來源

2017-02-15 Derek

你可以發佈pc視圖和手機視圖的圖像嗎？ –

忘記了補充：它也使用引導 – Derek

@Derek我的答案是否爲您解決了這個問題？ – Zze

我已經TW刪除了一些html和css，以便它可以有效地使用對內容進行居中定位的方法transform: transate()。

此外，我不知道什麼.modal-container css目前適用於，因爲這個類不在你的HTML。

請注意，translate是一個css3屬性，因此您可能希望確保您可以在目標設備上使用它（您沒有具體說明）。 http://caniuse.com/#search=translate

body{ 
 
    height: 5000px; 
 
} 
 
.modal-mask { 
 
    position: fixed; 
 
    z-index: 9998; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: rgba(0, 0, 0, .5); 
 
    display: table; 
 
    transition: opacity .3s ease; 
 
} 
 
.modal-container { 
 
    padding: 20px 30px; 
 
    background-color: #fff; 
 
    border-radius: 2px; 
 
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 
 
    transition: all .3s ease; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
} 
 
.modal-wrapper { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 300px; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.panel{ 
 
    margin-bottom: 0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="modal-mask" id="answerEditor"> 
 
    <div class="modal-wrapper"> 
 
    <div class="panel panel-success"> 
 
     <div class="panel-heading"> 
 
     Answer editor to review 
 
     </div> 
 
     <div class="panel-body"> 
 
     modal body right here 
 
     </div> 
 
     <div class="panel-footer"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      Footer 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

更新：

我已經改變了這種使用100vh和100vw爲.modal-mask。我也將body設置爲5000px，只是爲了在片段中滾動的好處。

來源

2017-02-15 20:40:24 Zze

謝謝，但即使在移動視圖中，如果我向下滾動頁面並單擊按鈕以顯示模式，它會一直顯示在頂部。它不會在計算機上這樣做，這就是爲什麼它讓我想起了 – Derek

@Derek你在做什麼手機？ – Zze

三星Galaxy S7 – Derek

-1

你的代碼似乎產生頂部有模式，無論手機或電腦：

下面是使用你的代碼我娛樂：

http://imgur.com/a/f42wD

來源

2017-02-15 20:27:21

這不是提到的問題。 – Derek

如果我有足夠的聲望，我會添加它作爲評論。 –

模態工作計算機上，但是當移動設備

回答

相關問題