Więc stworzyłem modal z następującymi 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>

I następujące 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>

Powyższe działa dobrze, gdy przeglądam go na komputerze, jednak gdy przejdę do telefonu komórkowego, modal unosi się do góry zamiast centrującego w widoku użytkownika.

Jakieś pomysły tego, co mogłoby się mylić?

Próbowałem szlifować wiele CSS i nigdzie nie mogę sprawdzić różnic CSS między wersją mobilną a komputerem.

Edytuj Powyższy kod używa również bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

-1
Derek Pollard 15 luty 2017, 23:19

2 odpowiedzi

Najlepsza odpowiedź

Ulepiłem niektóre z twoich HTML i CSS, aby skutecznie użyć metody centrujących transform: transate().

Nie jestem również pewien, co ma obecnie CSS .modal-container, ponieważ ta klasa nie jest w swoim HTML.

Tylko notatka, translate to właściwość CSS3, dzięki czemu możesz mieć pewność, że możesz użyć go na urządzeniach docelowych (nie powiedziałeś specjalnie). 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>

Aktualizacja:

Zmieniłem to, aby użyć 100vh i 100vw dla .modal-mask. Ustawiam też ciało do 5000px, tylko na korzyść z przewijania w fragmence teraz.

1
Zze 15 luty 2017, 21:26

Twój kod wydaje się wytwarzać modalny na górze niezależnie od telefonu komórkowego lub komputera:

Oto moja rekreacja przy użyciu kodu:

http://imgur.com/a/f42wd.

1
Derek Pollard 14 listopad 2018, 16:19