html - Bootstrap 3 模态位置

Question

我在将模态窗口定位在窗口中央时遇到问题。它显示右侧的位置。我错过了什么，这似乎是我无法解决的 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;
    }
}

Answer 1

@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;
}