Menu
I use bootstrap modal plugin. But modal dialog is not shown in center. Why? my mistake?
http://dl.dropbox.com/u/573972/stackoverflow/bootstrap/modal.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS-->
<link rel="stylesheet" href="bootstrap.min.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
</head>
<body>
<div id="login" class="modal">
<div class="modal-header">
<h3>Login to Room fuga</h3>
</div>
<div class="modal-body">
hogehoge
</div>
</div>
<script src="bootstrap.min.js">
</script>
<script>
$('#login').modal();
</script>
</body>
</html>
417
Answer: Use the CSS margin-top Property By default, Bootstrap modal window is aligned to the top of page with some margin.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds . modal-open to the <body> to override default scrolling behavior and generates a . modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Capture the show event of the .modal and then calculate the new position:
$('body').on('show', '.modal', function(){
$(this).css({'margin-top':($(window).height()-$(this).height())/2,'top':'0'});
});
DEMO: http://jsfiddle.net/sonic1980/b2EHU/
90
if your twitter bootstrap modal dialog is not centered horizontally you can fix this via css.
just give the modal dialog a negative left margin that is half it's width like e.g. so:
.modalDialogBlabla {
margin: 0 0 0 -250px;
width: 500px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
