bootstrap 模态框（modal）实现水平垂直居中显示的方法

最新推荐文章于 2024-05-11 14:36:41 发布
最新推荐文章于 2024-05-11 14:36:41 发布
阅读量6.3k 收藏 4
点赞数 1
分类专栏： JavaScript Web 文章标签： bootstrap javascript modal 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chjqxxxx/article/details/78165130
版权
       众所周知，bootstrap是一款非常实用的CSS框架（主要用于样式的快速搭建），由于其简洁，美观，快捷，响应式等特点备受大家喜欢，但是其本身也是存在很多bug，当应对与具体的业务逻辑的时候往往达不到细节要求，比如今天我要谈的bootstrap的模态框，其默认是显示距离顶端30px，左右居中。
       怎么让其在垂直方向也居中呢？

       大家可能想加一个CSS样式，让其距离顶部距离变长，实践是检验真理的唯一标准，当你去试过会发现很多问题，在不修改源码的前提下修改插件并没有自由配置的样式一直是前端人员头疼的事情，在此，我百度了下百度到两个方法

最低0.47元/天 解锁文章
chjqxxxx
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
11-23
使用过bootstrap modal（模态框）组件的人都有一种困惑， 好好的一个弹出框怎么就无法垂直居中了呢？刚巧在做一个eit项目，由于此项目里面一些框架要遵循nttdata的一些规则，故用到了Bootstrap这个东东，第一次碰到这个东东，有很大抵触，觉得不好，但用起来我觉得和别的弹出框真没什么两样。废话少说，切入正题，Bootstrap弹出框垂直居中的问题，因为我拿到的弹出框样式并非垂直居中，而是top 10%，但页面长了，就显得特别恶心。 解决方案如下所示： 1.在css里，找到 .modal.fade.in { top: 10%; } 这个样式，修改它就ok了，由于css中是
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
为了实现Bootstrap模态框的水平垂直居中显示，我们可以采用以下两种方法： 方法1： 这种方法依赖于JavaScript事件监听器，特别是`shown.bs.modal`事件，该事件在模态框展示完成后触发。我们可以在这个事件的回调...
BootstrapVue中模态(modal)提示框的title标题居中方法及示例代码
weixin_52026996的博客
08-18 1937
本文主要介绍BootstrapVue(Bootstrap和Vue)中，设置模态(modal)提示框组件的title标题居中的方法，以及相关的示例代码。
dialog模态框居中
最新发布
weixin_72325776的博客
05-11 113
【代码】dialog模态框居中。
Bootstrap modal不能垂直居中的解决办法
BroQi的专栏
08-24 691
参考http://blog.csdn.net/altaba/article/details/54669660 稍微修改了一下 $('#youModel').on('shown.bs.modal', function (e) { $(this).css('display', 'block'); var modalHeight=$(window).height() / 2 - $(
bootstrap 模态窗口按钮位置_Bootstrap模态框(modal)垂直居中
weixin_39598094的博客
12-19 442
今天就在使用Bootstrap框架中遇到的一个问题分享一下，在产品开发的过程中使用了大量的弹出窗口(modal)。刚开始学习使用的过程中就发现此窗口不能垂直居中，总是偏上，并且不能拖动，看了一下使用说明也没有提供过多的属性设置和方法，就这样使用默认的方式一直用着。最近，客户却提出了一个要求：能不能让弹出窗口居中，因为一些小的窗口偏上总感觉整体页面失衡，大一点的还过得去。因为之前对Bootstrap...
bootstrap弹窗modal垂直居中，最简单粗暴的方法
深漂小码哥
11-23 832
.modal-dialog { position: absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; -webkit-transform:translate(-50%,-50%) !important; -moz-transform:translate(-50%,-50%) !important; .
Bootstrap模态框(modal)垂直居中的实例代码
09-01
Bootstrap模态框（Modal）是前端开发中常用的一种交互组件，它允许在当前页面上弹出一个可交互的对话框，通常用于展示重要的信息或进行表单提交等操作。在Bootstrap框架中，模态框提供了丰富的样式和行为，但默认...
BootStrap模态框不垂直居中的解决方法
11-27
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法，供大家参考，具体内容如下 解决问题：BootStrap自带的模态框不垂直居中 解决方案：调用BootStrap为我们提供的方法$(‘.modal’).on(‘show.bs.modal’, ...
a按钮居中显示 bootstrap_Bootstrap中弹出层居中显示问题
weixin_30140399的博客
12-29 200
今天在用Bootstrap做页面的时候,遇到一个问题是,点击头部的登录注册链接,弹出层显示注册登录框.默认的情况下面弹出层是偏上显示,我自己想让弹出层居中显示,(无论屏幕多大,始终居中显示),使用以前的方法做法是获取到屏幕可视区的宽度和高度后减去弹出层内容的宽度和高度,除以2即可,然后用jquery进行设置css样式即可.例如:demo 测试地址:http://demo.901web.com/tp...
ant组件中modal的居中显示
weixin_44817180的博客
08-26 9227
注：该组件本身自带的居中显示：当缩小窗口，其宽度比modal小的时候会掉下去，上面留有一段空白，是因为before的高度问题引起 列： this.modalService.create({ nzContent: ModalTellDetailComponent, nzWrapClassName: 'centerModal', nzFooter: null, nzMaskClosable: false, nzC
弹框水平垂直居中
飞扬_柳絮的专栏
09-28 1000
在内容大于一屏时，弹框在屏幕上保持水平垂直居中<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="vi
ant design vue a-modal实现拖拽弹窗 你学废了吗！！
weixin_43251902的博客
06-30 1521
文件目录 index.vue文件 下面展示一些 内联代码片。 // An highlighted block <template> <a-modal :class="[modalClass, simpleClass]" :visible="visible" v-bind="$props" :footer="null" :bodyStyle="{padding:0}" @ok="handleOk" @cancel="handleCa
antd Modal
chen_c_的博客
04-17 2150
antd Modal框垂直居中
模态框（modal）自动居中
weixin_30500105的博客
01-27 1998
// modal对用户可见 $('.modal').on('shown.bs.modal', function () { modalOnResize(this); }) // 浏览器窗口大小改变事件 window.onresize = function(){ // 已显示modal var node = $(".modal:visible"); ...
antd vue Modal 弹窗位置调整
热门推荐
fl8545的博客
04-02 1万+
ant design vue 默认 的modal弹窗组件，收到的要求是弹窗能比默认的位置高一点 用官方文档的属性 写法如下： <a-modal title="新增" :visible="visible" :footer="null" @cancel="handleCancel" width="70%" :dialogStyle="dialogStyle"> <front-computer-add-tab :school-codes="options" v-on:notif
设置bootstrap中模态框（modal）框的位置（随窗口大小自动居中）
m0_38109926的博客
01-01 8734
以默认大小的 modal 为例，要做改变宽度其实只需要在.modal-dialog样式上做文章就行了。为了简单，我现在直接写在元素标签上了。 关键三点： 用display: inline-block； 父节点用text-center样式居中； 重置宽度width: auto 全部代码如下： <!DOCTYPE html> <html lang="e...
bootstrap模态框怎么实现
05-29
Bootstrap 是一个流行的前端框架，它提供了许多实用的组件，其中包括模态框...下面是使用 Bootstrap 实现模态框的基本步骤： 1. 引入 Bootstrap 样式文件和 JavaScript 文件，可以通过 CDN 或本地文件引入。 ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值