web-dev-qa-db-ja.com

ブートストラップでモーダルのデフォルトの位置を変更する方法は？

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>

      <div class="modal-body">
        <p>One fine body…</p>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

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

ブートストラップのデフォルトのモーダル位置を変更するにはどうすればよいですか。デフォルトの位置を変更するにはどこで編集する必要がありますか。

javascriptcsscss3twitter-bootstrap
35
dpndra

次のcssをhtmlに追加し、上、右、下、左の値を変更してみてください。

.modal {
   position: absolute;
   top: 10px;
   right: 100px;
   bottom: 0;
   left: 0;
   z-index: 10040;
   overflow: auto;
   overflow-y: auto;
}
35
msnfreaky

このクラスを設定すると、より良い結果が得られます。

.modal-dialog {
  position: absolute;
  top: 50px;
  right: 100px;
  bottom: 0;
  left: 0;
  z-index: 10040;
  overflow: auto;
  overflow-y: auto;
}

bootstrap= 3.3.7。

（すべてのアイデアはmsnfreakyの功績です...）

12
Bamboomy

ビューポートのモーダル位置を変更するには、モーダルdiv idをターゲットにできます。この例では、このidはmyModal3です

    <div id="modal3" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


#myModal3 {
top:5%;
right:50%;
outline: none;
overflow:hidden;
}
3
V31