web-dev-qa-db-ja.com

Bootstrap 3 Modal Position

モーダルウィンドウをウィンドウの中央に配置するのに問題があります。右側に位置が表示されていますが、何が欠けているのですか？これはCSSの問題であり、解決できないのですか？ご提案ありがとうございます！

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">I am a modal window, and no one can beat me!</h4>
      </div>
      <div class="modal-body">

        <!-- Columns within the modal window -->
        <div class="row">
          <div class="col-md-3">
            <img src="images/icons/dynamite.svg" alt="" />
          </div>

          <div class="col-md-9">
            <p class="lead">This is a test modal!</p>
          </div>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, omnis, sunt illum et minima facilis rerum eaque ullam quasi aperiam soluta beatae vero atque pariatur ab ad temporibus accusamus necessitatibus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close Window</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

CSS

.modal-backdrop {
    z-index: 1030;
    background-color: #243342;
}

.modal-backdrop.in {
    opacity: .95;
    filter: alpha(opacity=95);
}

.modal {
    z-index: 1040;
}

.modal-dialog {
    z-index: 1050;
}

.modal-content {
    width: 624px;
    background-color: #f9fafb;
    border: 2px solid #ebedef;
    border-radius: 7px;
    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    background-clip: border-box;
    -webkit-box-shadow: -14px 14px 0 0 rgba(0,0,0,0.35);
    box-shadow: -14px 14px 0 0 rgba(0,0,0,0.35);
}

@media (max-width: 767px) {
    .modal-content {
        width: auto;
    }
}

@media (max-width: 480px) {
    .modal-content {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.modal-header {
    padding: 17px 19px 15px 24px;
    border-bottom: 1px solid #ebedef;
}

.modal-header .close {
    margin: 5px 0 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #34495e;
}

.modal-title {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
}

.modal-body {
    padding: 20px 24px;
}

.modal-body p {
    font-size: 16px;
    line-height: 1.625;
}

.modal-footer {
    padding: 19px 22px 20px;
    margin-top: 0;
    background-color: #ebedef;
    border-top: none;
    border-radius: 0 0 7px 7px;
}

.modal-footer .btn + .btn {
    margin-left: 12px;
}

@media (max-width: 480px) {
    .modal-footer .btn {
        display: block;
        min-width: auto;
        margin-bottom: 15px;
    }

    .modal-footer .btn:last-child {
        margin-bottom: 0;
    }

    .modal-footer .btn + .btn {
        margin-left: 0;
    }
}

@media screen and (min-width: 768px) {
    .modal-dialog {
        left: 50%;
        right: auto;
        width: 624px;
    }
}
htmlcsstwitter-bootstrapmodal-dialog
14
pwiz
@media screen and (min-width: 768px) {
    .modal-dialog {
        left: 50%;
        right: auto;
        width: 624px;
    }
}

中心に設定ウィンドウが必要な場合は、このスタイルを使用する必要があります。

.modal-dialog{
   position: absolute;
   left: 50%;
   /* now you must set a margin left under zero - value is a half width your window */
   margin-left: -312px;
   /* this same situation is with height - example */
   height: 500px;
   top: 50%;
   margin-top: -250px;
}
28
mcmac
.modal-sss-dialog {
    position: absolute;
    margin-left: 200px;
    height: 500px;
    top: 50%;
    margin-top: -250px;
}
1
dinesh kalla