중앙 모달 부트 스트랩 (상단 고정 메뉴에서 고정 된 위치)

Question

화면 가운데에 모달 창을 중심에 놓고 싶습니다. 현재 모델 창은 창 상단에 고정되어 있으며 맨 위에 고정되어있는 내 메뉴 아래에 배치됩니다. 모달 창을 화면 중앙에 배치하려면 어떻게합니까? 여기

The screen of my Website

사용되는 CSS/HTML 코드도됩니다 : 다음은 현재 결과의 스크린 샷이다에 대한

.modal-open { 
 
    overflow: hidden; 
 
} 
 
.modal { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1100; 
 
    display: none; 
 
    overflow: hidden; 
 
    -webkit-overflow-scrolling: touch; 
 
    outline: 0; 
 
} 
 
.modal.fade .modal-dialog { 
 
    -webkit-transition: -webkit-transform .3s ease-out; 
 
     -o-transition:  -o-transform .3s ease-out; 
 
      transition:   transform .3s ease-out; 
 
    -webkit-transform: translate(0, -25%); 
 
     -ms-transform: translate(0, -25%); 
 
     -o-transform: translate(0, -25%); 
 
      transform: translate(0, -25%); 
 
} 
 
.modal.in .modal-dialog { 
 
    -webkit-transform: translate(0, 0); 
 
     -ms-transform: translate(0, 0); 
 
     -o-transform: translate(0, 0); 
 
      transform: translate(0, 0); 
 
} 
 
.modal-open .modal { 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.modal-dialog { 
 
    position: relative; 
 
    width: auto; 
 
    margin: 10px; 
 
} 
 
.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); 
 
} 
 
.modal-backdrop { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: #000; 
 
} 
 
.modal-backdrop.fade { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
} 
 
.modal-backdrop.in { 
 
    filter: alpha(opacity=50); 
 
    opacity: .5; 
 
} 
 
.modal-header { 
 
    min-height: 16.42857143px; 
 
    padding: 15px; 
 
    border-bottom: 1px solid #e5e5e5; 
 
} 
 
.modal-header .close { 
 
    margin-top: -2px; 
 
} 
 
.modal-title { 
 
    margin: 0; 
 
    line-height: 1.42857143; 
 
} 
 
.modal-body { 
 
    position: relative; 
 
    padding: 15px; 
 
} 
 
.modal-footer { 
 
    padding: 15px; 
 
    text-align: right; 
 
    border-top: 1px solid #e5e5e5; 
 
} 
 
.modal-footer .btn + .btn { 
 
    margin-bottom: 0; 
 
    margin-left: 5px; 
 
} 
 
.modal-footer .btn-group .btn + .btn { 
 
    margin-left: -1px; 
 
} 
 
.modal-footer .btn-block + .btn-block { 
 
    margin-left: 0; 
 
} 
 
.modal-scrollbar-measure { 
 
    position: absolute; 
 
    top: -9999px; 
 
    width: 50px; 
 
    height: 50px; 
 
    overflow: scroll; 
 
} 
 
@media (min-width: 768px) { 
 
    .modal-dialog { 
 
    width: 600px; 
 
    margin: 30px auto; 
 
    } 
 
    .modal-content { 
 
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); 
 
      box-shadow: 0 5px 15px rgba(0, 0, 0, .5); 
 
    } 
 
    .modal-sm { 
 
    width: 300px; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .modal-lg { 
 
    width: 900px; 
 
    } 
 
}

<!-- Bouton execution modal --> 
 
\t <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
\t Lancer la modal 
 
\t </button> 
 
        
 
        \t <!-- Modal --> 
 
\t <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
\t <div class="modal-dialog"> 
 
\t  <div class="modal-content"> 
 
\t <div class="modal-header"> 
 
\t <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
\t <h4 class="modal-title" id="myModalLabel">Un Savoir-Faire International</h4> 
 
\t </div> 
 
\t <div class="modal-body"> 
 
     <img src="img/savoir-faire-international2.jpg" class="img-responsive"><br> 
 
\t "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
\t </div> 
 
\t  </div><!-- /.modal-content --> 
 
\t </div><!-- /.modal-dialog --> 
 
\t </div><!-- /.modal -->

감사합니다 (고전 부트 스트랩 코드는) 지원하다 ! 장 - 밥 티스트는

Answer 1

이 CSS를 추가 답변

.modal { 
    text-align: center; 
    padding: 0!important; 
} 

.modal:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -4px; 
} 

.modal-dialog { 
    display: inline-block; 
    text-align: left; 
    vertical-align: middle; 
}