モーダル位置エラー

Question

私はCSSの初心者です。私はモーダルウィンドウを編集していますが、配置に問題があります。このモーダルウィンドウは、ブラウザの解像度を変更するたびに、スクリーンショットに表示される位置決めの問題があります。幅と高さのサイズを％で表現する必要があります。

Screenshot

モーダルHTML：

<div class="modal fade" id="erroAdocaoAindaNaoConcluida" tabindex="-1" role="dialog" aria-labelledby="erroAdocaoAindaNaoConcluidaLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header" align="center"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 

       <span class="titulo_modal" id="erroAdocaoAindaNaoConcluidaLabel">Detectamos um erro</span> 

      </div> 

      <div class="modal-body" align="center"> 
       <p class="titulo_form"> Você só pode adotar um animal por vez.</p> 
      </div> 

      <div class="modal-footer"> 

       <button type="button" class="tamanho_btn_adotar btn-primary" data-dismiss="modal">Fechar</button> 

      </div> 
     </div> 
    </div> 
</div> 

モーダル・コンテンツのCSS：

.modal-content{ 
    position:relative;width:45%; 
    background-color:#fff; 
    -webkit-background-clip:padding-box; 
    background-clip:padding-box; 
    border:1px solid #999; 
    border:1px solid rgba(0,0,0,.2); 
    border-radius:6px; 
    outline:0; 
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,.5); 
    box-shadow:0 3px 9px rgba(0,0,0,.5) 
} 

.modal-content{ 
    -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5); 
    box-shadow:0 5px 15px rgba(0,0,0,.5) 
} 

モーダルボディCSS：

.modal-body{position:relative;padding:15px} 

モーダルダイアログCSS：

.modal-dialog{width:600px;margin:30px auto} 
.modal-dialog{ 
    -webkit-transform:translate(0,0); 
    -ms-transform:translate(0,0); 
    -o-transform:translate(0,0); 
    transform:translate(0,0) 
} 

.modal-dialog{ 
    position:relative; 
    width:auto; 
    top:20px; 
    left:8%; 
    margin:10px 
} 

Answer 1

私はuがあなたのバグページのURLを送ることができるだけで

.modal-content { 
 
\t position: relative; 
 
\t width: 45%; 
 
\t background-color: #fff; 
 
\t -webkit-background-clip: padding-box; 
 
\t background-clip: padding-box; 
 
\t border: 1px solid #999; 
 
\t border: 1px solid rgba(0,0,0,.2); 
 
\t border-radius: 6px; 
 
\t outline: 0; 
 
\t -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); 
 
\t box-shadow: 0 3px 9px rgba(0,0,0,.5); 
 
\t margin: 0 auto; 
 
} 
 
.modal-content { 
 
\t -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); 
 
\t box-shadow: 0 5px 15px rgba(0,0,0,.5) 
 
} 
 
.modal-dialog { 
 
\t width: 600px; 
 
\t margin: 30px auto 
 
} 
 
.modal-dialog { 
 
\t -webkit-transform: translate(0, 0); 
 
\t -ms-transform: translate(0, 0); 
 
\t -o-transform: translate(0, 0); 
 
\t transform: translate(0, 0) 
 
} 
 
.modal-dialog { 
 
\t position: relative; 
 
\t width: auto; 
 
\t top: 20px; 
 
\t margin: 10px 
 
} 
 
.modal-body { 
 
\t position: relative; 
 
\t padding: 15px 
 
} 
 
@media (max-width:480px) { 
 
.modal-content { 
 
\t width: 100%; 
 
} 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> 
 
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">--> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="erroAdocaoAindaNaoConcluidaLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header" align="center"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
     <span class="titulo_modal" id="erroAdocaoAindaNaoConcluidaLabel">Detectamos um erro</span> </div> 
 
     <div class="modal-body" align="center"> 
 
     <p class="titulo_form"> Você só pode adotar um animal por vez.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="tamanho_btn_adotar btn-primary" data-dismiss="modal">Fechar</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 2

あなたの親部門を絶対的なポジションにする。

Answer 3

@Isaac Menesesコード内の以下のCSSプロパティを置き換えてください。

.modal-dialog { 
 
    position: relative; 
 
    margin: 30px auto; 
 
    width: 40%; 
 
} 
 

 
.modal-content { 
 
    position: relative; 
 
    background-color: #fff; 
 
    -webkit-background-clip: padding-box; 
 
    background-clip: padding-box; 
 
    border: 1px solid #999; 
 
    border: 1px solid rgba(0,0,0,.2); 
 
    border-radius: 6px; 
 
    outline: 0; 
 
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); 
 
    box-shadow: 0 3px 9px rgba(0,0,0,.5); 
 
}

Answer 4

柔軟な実装。 widthとheightがautoに設定されている場合でも機能します。

.modal { 
 
    /* Just styles for demonstation */ 
 
    /* setting width and height is optional */ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid orange; 
 
    
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="modal"> 
 
</div>