DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Bootstrap模態框水平垂直居中與增加拖拽功能
Bootstrap模態框水平垂直居中與增加拖拽功能
編輯:關於JavaScript     

最近開發一個CMS系統使用上了Bootstrap,在開發一個添加某些選項時,打算彈出一個模態框,但是發現,模態框不會垂直居中到屏幕上,而是在屏幕上方,找了好多資料都沒搞定,最終自己試出了一種JS的方法,同時還需要Bootstrap模態框可以拖動,但是發現默認的也不行,翻遍了網絡找了出來。現在分享給大家:

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

以下為Bootstrap模態框拖拽功能的增加方法

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

handle: ".modal-header", 去除將可以整個模態框都可以拖動,其中modal-header代表拖動的DIV的CLASS或ID

以下為彈出Bootstrap模態框水平垂直居中的代碼

/* 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); 代表用戶改變浏覽器時的事件,可以不用,但是改變浏覽器,模態框不會跟著變化。

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

Bootstrap模態框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">標題</h4> 
</div> 
<div style="padding:5px;"> 
<div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000"> 

模態框內容

</div> 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> 
</div> 
</div> 
</div> 
</div> 

Bootstrap模態框水平垂直居中與增加拖拽功能.png

以上所述是小編給大家介紹的Bootstrap模態框水平垂直居中與增加拖拽功能,實現一個模擬後台數據登入的效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved