bootstrap modal垂直居中（簡單封裝）
阿新 • • 發佈：2017-08-12
math str class ria extend splay play 觸發 代碼
未封裝前：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <button type="button" id="modalBtn" class="btn btn-primary">點擊彈出modal</button> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal 標題</h4> </div> <div class="modal-body"> <p>內容…</p> <p>內容…</p> <p>內容…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">確定</button> </div> </div> </div> </div> <script type="text/javascript"> $(function(){ var $m_btn = $(‘#modalBtn‘); var $modal = $(‘#myModal‘); $m_btn.on(‘click‘, function(){ $modal.modal({backdrop: ‘static‘}); }); $modal.on(‘show.bs.modal‘, function(){ var $this = $(this); var $modal_dialog = $this.find(‘.modal-dialog‘); // 關鍵代碼，如沒將modal設置為 block，則$modala_dialog.height() 為零 $this.css(‘display‘, ‘block‘); $modal_dialog.css({‘margin-top‘: Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) }); }); }); </script> </body> </html>
封裝後：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <button type="button" id="modalBtn" class="btn btn-primary">點擊彈出modal</button> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal 標題</h4> </div> <div class="modal-body"> <p>內容…</p> <p>內容…</p> <p>內容…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">確定</button> </div> </div> </div> </div> <script type="text/javascript"> $(function(){ $(‘#myModal‘).myfunction({ $m_btn:$(‘#modalBtn‘), //觸發事件元素 $modal:$(‘#myModal‘), //響應事件元素 eventType:‘click‘ //事件類型 }); }); ;(function ($) { $.fn.myfunction=function (options) { var defaults={ $m_btn : $(‘#modalBtn‘), $modal : $(‘#myModal‘), eventType:‘click‘ }; var setting=$.extend({},defaults,options); this.each(function(){ var my_btn = setting.$m_btn; var _modal = setting.$modal; var _event = setting.eventType; my_btn.on(_event, function(){ _modal.modal({backdrop: ‘static‘}); }); _modal.on(‘show.bs.modal‘, function(){ var $this = $(this); var $modal_dialog = $this.find(‘.modal-dialog‘); $this.css(‘display‘, ‘block‘); $modal_dialog.css({‘margin-top‘: Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) }); }); }); } })(jQuery); </script> </body> </html>
bootstrap modal垂直居中（簡單封裝）