モーダルは、コンピュータ上で動作しますが、モバイルデバイス上で

Question

は、だから私は、次のCSSとモーダル作成したときに一番上に浮かぶ：

<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> 

を上記はコンピュータで見るとうまくいくが、モバイルに行くときはいつでも、モーダルはユーザーの視点に集中するのではなく、一番上に浮かぶ。

何が問題になる可能性がありますか？

私は多くのCSSを微調整しようとしましたが、どこにもいなかったので、モバイル版とコンピュータのCSSの違いを確認することはできません。

EDITは、上記のコードは、同様に、ブートストラップ使用しています：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Answer 1

私はTWをしましたあなたのHTMLとCSSのいくつかを焼いて、効果的にコンテンツのセンタリング方法をtransform: transate()にすることができます。

また、.modal-containerのCSSが現在このクラスに適用されているものは、あなたのHTMLには含まれていません。

ちょうどメモ、translateはcss3プロパティなので、ターゲットデバイスで使用できるようにすることができます（あなたは特に言及していません）。

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>

http://caniuse.com/#search=translate

アップデート：私は.modal-maskため100vhと100vwを使用するために、これを変更した

。スニペットをスクロールするだけで、ボディを5000pxに設定しました。

Answer 2

あなたのコードは関係なく、携帯電話やPCの上部にモーダルを生成するようだ：ここで

はあなたのコードを使用して、私のレクリエーションです：

http://imgur.com/a/f42wD