5 AĞUSTOS 2013, PAZARTESİ
Dikey ortalama Bootstrap kalıcı pencere
Bazı css özellikleri eklemeye çalıştım görüş (orta) benim kalıcı center ediyorum
.modal { position: fixed; top:50%; left:50%; }
Bu örnek http://jsfiddle.net/rniemeyer/Wjjnd/ kullanıyorum
Denedim
$("#MyModal").modal('show').css(
{
'margin-top': function () {
return -($(this).height() / 2);
},
'margin-left': function () {
return -($(this).width() / 2);
}
})
CEVAP
18 Temmuz 2014, Cuma
Bu işi yapar : http://jsfiddle.net/sRmLV/53/
Yardımcısı-div ve bazı özel css kullanır. Javascript veya jQuery gerekli.
HTML(demo-code Bootstrap dayalı)
<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">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
CSS
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events: all;
}
Bunu Paylaş:
Bootstrap 3 dikey konum merkezi kalıcı...
Twitter Bootstrap kalıcı pencere içeri...
Dikey bir düğme tablo hücresinde ortal...
Nasıl Bootstrap kalıcı bir pencere jQu...
Yasaklı twitter kapanmasını kalıcı pen...