Bootstrap模態響應垂直居中？

如何垂直居中自舉模態？我在這裏尋找解決方案，但他們沒有響應，或者根本沒有工作。我正在使用Bootsrap 3.Bootstrap模態響應垂直居中？

模式不再響應較小的屏幕，或者在使用下面的解決方案後調整瀏覽器窗口大小。

jQuery的，

$('.modal').on('shown.bs.modal', function() { 
      $(this).find('.modal-dialog').css({ 
       'margin-top': function() { 
        return -($(this).outerHeight()/2); 
       }, 
       'margin-left': function() { 
        return -($(this).outerWidth()/2); 
       } 
      }); 
     });

CSS，

.modal-dialog { 
     margin: 0; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
    }

引導，

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"> 
    <div class="modal-dialog custom-class"> 
    <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" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </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>

任何想法？

編輯：

我試圖用這個CSS，

@media screen and (min-width: 768px) { 
     .custom-class { 
      width: 800px; /* either % (e.g. 60%) or px (400px) */ 
      top: 25%; 
     } 
    }

模態只是回落到較小的屏幕上的默認位置，但我想它垂直居中。

也，top: 25%;並沒有使它完全垂直居中。

來源

2014-02-10 laukok

這是什麼意思_The模式不響應了？ http://jsfiddle.net/9TL4U/ – Morpheus

我覺得這是它，

CSS，

.modal-dialog { 
     top: 0; 
     margin-top:0; 
     display: none; 
     border:1px solid red; 
    }

的jQuery +引導，

$('#myModal').on('shown.bs.modal', function (e) { 

      var object = $('.modal-dialog'); 
      var object_outerheight = object.outerHeight(); 
      var window_height = $(window).height(); 
      var window_scrolltop = $(window).scrollTop(); 
      var object_top = ((window_height - object_outerheight)/2) + window_scrolltop; 
      console.log(object_top); 

      // Set the object's position. 
      object.css({ 
       marginTop: object_top + 'px' 
      }).fadeIn(); 

      // Add responsive when the window is being resized. 
      $(window).resize(function() { 

       // Redo the calc on each resize's action. 
       var window_height = $(window).height(); 
       var window_scrolltop = $(window).scrollTop(); 
       var object_top = ((window_height - object_outerheight)/2) + window_scrolltop; 
       console.log(object_top); 

       // Reset the object's position. 
       object.css({ 
        marginTop: object_top + 'px' 
       }); 

      }); 
     });

來源

2014-02-10 15:49:28 laukok

'var window_scrolltop = $（window）.scrollTop（）;'爲我做了一件糟糕的工作，如果我點擊按鈕一直沿着頁面（我的模態一直向下我的頁面和我不得不滾動到它），所以我刪除了這一行（和下一行的'+ window_scrolltop'）。我還在margin_top上添加了一個支票，以便不低於零。（因爲我的模式的頂部在非常小的屏幕尺寸下掉到屏幕上）否則：謝謝你的回答！ –

用css我們可以放置在垂直中心引導模式。

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

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

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

來源

2016-05-11 19:14:55

Bootstrap模態響應垂直居中？

回答

相關問題