bootstrap modal垂直居中 (转)

本文提供两种方法解决Bootstrap模态框默认不居中的问题。一是直接修改bootstrap.js源码,二是通过jQuery在模态框显示时动态调整其位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 根据博友的经验,总结后请使用方法一就行了

一,修改bootstrap.js 源码

原来的:

  Modal.prototype.adjustDialog = function () {
    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

    this.$element.css({
      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
    })
  }

修改为:

Modal.prototype.adjustDialog = function () {
    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

    this.$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;//浏览器高 - 模态框高 再 / 2
    $modal_dialog.css({'margin': m_top + 'px auto'});
  }

如果垂直居中了

 

二,jquery中

<script type="text/javascript">
      $(function(){
        // dom加载完毕
        var $m_btn = $('#modalBtn');
        var $modal = $('#myModal');
        $m_btn.on('click', function(){
          $modal.modal({backdrop: 'static'});
        });

        // 测试 bootstrap 居中
        $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>

 这里参考这位博友吧:http://www.cnblogs.com/zzj-suxiao/articles/5460972.html

 

<think>好的,我现在需要帮助用户解决在u-modal组件中实现文字居中的问题。首先,我得理解用户的需求。他们可能在使用某个名为u-modal的模态框组件,想要让其中的文字内容水平或垂直居中。不过用户提到的u-modal可能是指某个特定UI库中的组件,比如UniApp的uni-modal或者其它类似库的组件。首先,我需要确认常见的实现方式,然后结合提供的引用内容来给出建议。 根据用户提供的引用内容,有几个相关的例子。比如引用[4]中提到了uni-table中使用align="center"和CSS的vertical-align: middle来实现水平和垂直居中。引用[5]则提到了使用antd-modal时通过transform: translateY(-50%)来实现垂直居中。此外,引用[1]中使用了shown.bs.modal事件来动态计算margin-top,这可能适用于需要动态调整位置的情况。 接下来,我需要考虑u-modal组件的具体情况。假设u-modal的结构类似于常见的模态框,通常包含一个容器(如.modal-content),里面可能有标题、内容和操作按钮。要让文字居中,通常需要针对这些元素应用CSS样式。 首先,水平居中。对于块级元素,可以设置text-align: center。如果是内联元素或flex容器,可能需要不同的方法。例如,在.modal-title或.modal-content中添加text-align: center。如果是使用flex布局,可以设置justify-content: center。 然后是垂直居中。如果模态框本身已经垂直居中,那么内容部分可能需要内部元素的垂直居中。可以通过设置display: flex和align-items: center,或者使用vertical-align: middle(针对表格单元格或行内元素)。 查看用户提供的引用,特别是引用[4]中的例子,他们在uni-table中使用了align="center"属性以及CSS的vertical-align: middle。这可能意味着在u-modal中,可以通过类似的属性或CSS来实现。如果u-modal支持类似align的属性,直接在组件标签上设置可能更简单。否则,需要通过CSS覆盖样式。 另外,引用[5]中的例子使用了transform: translateY(-50%)来将模态框垂直居中,这可能影响内部内容的定位。如果模态框本身已经居中,内部内容的居中可能需要额外的样式。例如,设置.modal-body的display: flex,并使用flex-direction: column配合justify-content和align-items来实现居中。 可能需要注意的问题包括:样式的优先级,可能需要使用!important来覆盖组件库的默认样式;检查u-modal的结构,确定需要修改的具体类名或元素;以及响应式设计,确保在不同屏幕尺寸下居中效果一致。 如果用户无法直接修改组件代码,可能需要通过全局CSS或深度选择器(如/deep/或::v-deep)来覆盖样式。例如,在引用[4]中使用了:v-deep来覆盖uni-table的样式,这可能适用于Vue等框架中的scoped样式。 总结可能的解决方案: 1. 使用text-align: center实现水平居中。 2. 使用flex布局实现水平和垂直居中。 3. 检查组件是否提供居中的属性,如align。 4. 使用vertical-align: middle(适用于表格布局或行内元素)。 5. 动态计算位置(如引用[1]的方法),但可能较复杂。 需要结合用户的具体组件结构和可用的CSS类名来具体实施。例如,假设u-modal的内容容器有一个类名.modal-content,可以添加如下样式: .u-modal .modal-content { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } 或者针对标题和内容分别设置: .u-modal .modal-title { text-align: center; } .u-modal .modal-body { display: flex; justify-content: center; align-items: center; } 如果遇到样式覆盖问题,可能需要使用!important或深度选择器,如: ::v-deep .u-modal .modal-body { text-align: center !important; } 另外,参考引用[5]中的媒体查询,可能需要考虑响应式情况下的样式调整,但用户目前的需求可能不需要。不过,可以建议用户测试不同屏幕尺寸下的显示效果。 最后,生成相关问题需要考虑用户可能的后续疑问,比如如何调整整个模态框的位置、如何处理动态内容居中,或者与其他UI库的兼容性问题。</think>在u-modal组件中实现文字居中主要通过CSS样式控制,以下是具体实现方式及示例代码: ### 一、水平居中实现方案 1. **全局文本居中**(适用于所有子元素) ```css /* 作用于整个模态框内容区域 */ .u-modal-content { text-align: center !important; } ``` 2. **标题单独控制**(精准定位) ```css .u-modal-header h3 { text-align: center; width: 100%; } ``` ### 二、垂直居中实现方案 1. **Flex布局方案**(推荐) ```css .u-modal-dialog { display: flex; align-items: center; min-height: calc(100% - 1rem); /* 兼容Bootstrap模态框逻辑[^1] */ } .u-modal-content { margin: auto; /* 关键属性 */ } ``` 2. **绝对定位方案** ```css .u-modal-body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` ### 三、综合实现示例 ```css /* 同时实现水平垂直居中 */ .u-modal { display: flex !important; align-items: center !important; justify-content: center !important; } .u-modal-dialog { margin: 0 auto; /* 水平居中 */ vertical-align: middle; /* 兼容表格布局[^4] */ } .u-modal-content { text-align: center; line-height: 1.6; /* 增强垂直居中效果 */ } ``` ### 四、动态适配方案 ```javascript // 监听模态框打开事件 modal.on('show', function() { const $content = this.querySelector('.u-modal-content'); const contentHeight = $content.offsetHeight; $content.style.marginTop = `calc(50vh - ${contentHeight/2}px)`; /* 类似Bootstrap的定位逻辑 */ }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值