快捷導(dǎo)航

Bootstrap模態(tài)框水平垂直居中與增加拖拽功能

更新時(shí)間：2016年11月09日 14:33:52 作者：一政

最近開發(fā)一個(gè)CMS系統(tǒng)使用上了Bootstrap，在開發(fā)一個(gè)添加某些選項(xiàng)時(shí)，打算彈出一個(gè)模態(tài)框，但是發(fā)現(xiàn)，模態(tài)框不會(huì)垂直居中到屏幕上，而是在屏幕上方,通過查閱資料才解決此問題，下面小編給大家分享解決思路

最近開發(fā)一個(gè)CMS系統(tǒng)使用上了Bootstrap，在開發(fā)一個(gè)添加某些選項(xiàng)時(shí)，打算彈出一個(gè)模態(tài)框，但是發(fā)現(xiàn)，模態(tài)框不會(huì)垂直居中到屏幕上，而是在屏幕上方，找了好多資料都沒搞定，最終自己試出了一種JS的方法，同時(shí)還需要Bootstrap模態(tài)框可以拖動(dòng)，但是發(fā)現(xiàn)默認(rèn)的也不行，翻遍了網(wǎng)絡(luò)找了出來?，F(xiàn)在分享給大家：

原文地址：http://www.panshy.com/articles/201509/webdev-2524.html

以下為Bootstrap模態(tài)框拖拽功能的增加方法

$("#myModal").draggable({ 
handle: ".modal-header", 
cursor: 'move', 
refreshPositions: false 
});

handle: ".modal-header", 去除將可以整個(gè)模態(tài)框都可以拖動(dòng)，其中modal-header代表拖動(dòng)的DIV的CLASS或ID

以下為彈出Bootstrap模態(tài)框水平垂直居中的代碼

/* center modal */ 
function centerModals() { 
$('#myModal').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); 
}); 
} 
$('#myModal').on('show.bs.modal', centerModals); 
$(window).on('resize', centerModals);

其中，$(window).on('resize', centerModals); 代表用戶改變?yōu)g覽器時(shí)的事件，可以不用，但是改變?yōu)g覽器，模態(tài)框不會(huì)跟著變化。

以上的JS代碼加到頁面的最后即可

Bootstrap模態(tài)框HTML

<!-- 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" aria-hidden="true">×</button> 
<h4 class="modal-title" id="myModalLabel">標(biāo)題</h4> 
</div> 
<div style="padding:5px;"> 
<div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000">

模態(tài)框內(nèi)容

</div> 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> 
</div> 
</div> 
</div> 
</div>

Bootstrap模態(tài)框水平垂直居中與增加拖拽功能.png

以上所述是小編給大家介紹的Bootstrap模態(tài)框水平垂直居中與增加拖拽功能,實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: