當前位置：
首頁 >
bootstrap modal垂直居中（简单封装）
發布時間：2025/4/14
28
豆豆
生活随笔
收集整理的這篇文章主要介紹了
bootstrap modal垂直居中（简单封装）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.使用modal 彈出事件方法；
未封裝前：
<!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>?
2.修改bootstrap.js 源碼；
打開bootstrap.js ctrl+f 找到 modal對應代碼：
?彈出框出現時， 調用的自然是 Modal.prototype.show() 方法， 而show 方法中又調用了?that.adjustDialog() 方法：
加上少量代碼：
Modal.prototype.adjustDialog = function () {var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeightthis.$element.css({paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''})// 是彈出框居中。。。var $modal_dialog = $(this.$element[0]).find('.modal-dialog');var m_top = ( $(window).height() - $modal_dialog.height() )/2;$modal_dialog.css({'margin': m_top + 'px auto'});}然后就實現modal垂直居中了， 效果圖：
轉載于:https://www.cnblogs.com/hjbky/p/7350523.html
總結
以上是生活随笔為你收集整理的bootstrap modal垂直居中（简单封装）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WindowsServer2003双网卡
- 下一篇： 关于对象、构造函数、原型、原型链、继承