如何垂直居中模態？

我想垂直居中模態。我在Google上搜索了很多，但沒有發現任何幫助。這裏是我的代碼：如何垂直居中模態？

function inactive(id, ths) { 
 
    $("#confirmation").modal("show"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title">Are you sure you want to inactivate it?</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha"> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
 
     <button type="button" class="btn btn-primary" id="yes">Yes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我怎麼能垂直居中呢？

來源

2016-11-05 Rushabh Shah

屏幕上哪裏出現模態？ – Rhono

在頂部，我的導航欄覆蓋模式。 –

onclick嘗試檢查編號 – brk

未經測試，但你可以試試這個

.yourElement{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2016-11-05 06:05:51 brk

如何檢查點擊哪個按鈕？ –

試試這個： -

// Vertical centered modals 
 
// you can give custom class like this // var modalVerticalCenterClass = ".modal.modal-vcenter"; 
 

 
var modalVerticalCenterClass = ".modal"; 
 
function centerModals($element) { 
 
    var $modals; 
 
    if ($element.length) { 
 
     $modals = $element; 
 
    } else { 
 
     $modals = $(modalVerticalCenterClass + ':visible'); 
 
    } 
 
    $modals.each(function(i) { 
 
     var $clone = $(this).clone().css('display', 'block').appendTo('body'); 
 
     var top = Math.round(($clone.height() - $clone.find('.modal-content').height())/2); 
 
     top = top > 0 ? top : 0; 
 
     $clone.remove(); 
 
     $(this).find('.modal-content').css("margin-top", top); 
 
    }); 
 
} 
 
$(modalVerticalCenterClass).on('show.bs.modal', function(e) { 
 
    centerModals($(this)); 
 
}); 
 
$(window).on('resize', centerModals);

/* scroll fixes */ 
 
.modal-open .modal { 
 
    padding-left: 0px !important; 
 
    padding-right: 0px !important; 
 
    overflow-y: scroll; 
 
} 
 

 
/* centering styles for jsbin */ 
 
html, 
 
body { 
 
    width:100%; 
 
    height:100%; 
 
} 
 
html { 
 
    display:table; 
 
} 
 
body { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 
body > .btn { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Bootstrap 3 vertically centered modal and scroll fixes</title> 
 
    <meta name="description" content="Bootstrap 3 vertically centered modal and scroll fixes"> 
 
    <!-- include bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
    
 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></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> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
<!-- include jQuery --> 
 
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
    
 
<!-- include bootstrap --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
    
 
</body> 
 
</html>

來源

2016-11-05 06:12:37

，因爲它看起來的引導模式，結帳這個Fiddle（的jsfiddle ）。

嘗試

.modal-dialog { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) !important; 
}

希望這有助於！

來源

2016-11-05 06:26:37

如何垂直居中模態？

回答

相關問題