モーダルを垂直にセンターする方法は？

私はモーダルを垂直にセンターしたいです。私は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 IDを確認しようとします – brk

テストしていますが、このお試しください。この

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

出典

2016-11-05 06:05:51 brk

どのボタンをクリックして確認できますか？ –

を試すことができない - それは、ブートストラップモーダルように見えたようjsFiddle（このFiddle、チェックアウトを

// 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

を）。

・ホープ、このことができます

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

をお試しください！

出典

2016-11-05 06:26:37

モーダルを垂直にセンターする方法は？

答えて

関連する問題