`
liuhd2010
  • 浏览: 148015 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

Bootstrap modal垂直居中

 
阅读更多

        在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看,代码如下:

//在初始显示时设置垂直居中
$('#YourModal').modal().css({
    'margin-top': function () {
        return -($(this).height() / 2);
    }
});

//或者我们可以将这个效果注册到显示事件中:
$('.modal').on('show', function() {
    $(this).css({
        'margin-top': function () {
            return -($(this).height() / 2);
        }
    });
});

      今天正好遇到这个问题,不过我用的Bootstrap框架是Bootstrap3版本了,解决代码如下:  

$('#YourModal').on('show.bs.modal', function (e) {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            var modalHeight = $('#yourModal').find('.modal-dialog').height();
            return ($(window).height() / 2 - (modalHeight / 2));
        }
    });    
});

  

分享到:
评论

相关推荐

    bootstrap 模态框(modal)实现水平垂直居中显示

    为了实现Bootstrap模态框的水平垂直居中显示,我们可以采用以下两种方法: 方法1: 这种方法依赖于JavaScript事件监听器,特别是`shown.bs.modal`事件,该事件在模态框展示完成后触发。我们可以在这个事件的回调...

    Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    Bootstrap Modal垂直居中问题的解决方法主要是通过CSS和JavaScript进行调整。在CSS中修改Modal的定位属性,或者在JavaScript中动态计算并设置Modal的位置,都可以达到垂直居中的效果。在实际应用中,可以根据项目...

    bootstrap模态框垂直居中效果

    在本文中,我们将深入探讨如何实现Bootstrap模态框(Modal)的垂直居中效果,这是一种常见且实用的前端布局技巧。Bootstrap是一个流行的HTML、CSS和JS框架,它提供了丰富的组件和样式,使得开发者能快速构建响应式和...

    bootstrap modal弹出框的垂直居中

    在Bootstrap中,Modal通常用于显示额外的信息,如警告、确认消息或者表单等,而垂直居中是Modal的一个常见需求,以确保内容在任何屏幕尺寸下都能保持视觉平衡。 在Bootstrap的默认设置中,Modal的垂直居中并不直接...

    BootStrap模态框不垂直居中的解决方法

    本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$(‘.modal’).on(‘show.bs.modal’, ...

    Bootstrap模态框(modal)垂直居中的实例代码

    在Bootstrap框架中,模态框提供了丰富的样式和行为,但默认情况下,模态框可能不会自动垂直居中显示。在某些设计需求下,比如为了保持页面的视觉平衡,我们需要将模态框垂直居中。 针对这个问题,一种常见的解决...

    bootstarp modal框居中显示的实现代码

    接着,它获取模态框对话框的高度(`modalDialogHeight`)和窗口的高度(`windowHeight`),然后计算出需要的`margin-top`值,将其设置到`.modal-dialog`元素上,从而实现垂直居中。 此外,注意到原始描述中的代码片段,...

    Bootstrap模态框水平垂直居中与增加拖拽功能

    总的来说,实现Bootstrap模态框的水平垂直居中和拖拽功能需要结合CSS和JavaScript技术。通过上述方法,我们可以创建出既美观又实用的模态框,提升用户体验。在实际项目中,你可以根据需求调整这些代码,例如添加动画...

    在手机上改进Bootstrap全屏模式的简单方法

    请注意,为了保持内容的垂直居中,可能还需要调整`.modal-content`的`padding`。 2. 遮罩层全屏:确保模态框背后的遮罩层(`.modal-backdrop`)也覆盖整个屏幕: ```css .modal-backdrop.modal-fullscreen { ...

    Introducing Bootstrap 4.zip

    2. Flexbox 支持:Bootstrap 4开始使用Flexbox布局模型,这使得创建复杂的弹性布局变得更加简单,同时解决了传统CSS布局的一些问题,如垂直居中对齐。 3. 更多预定义样式:Bootstrap 4 提供了大量的预定义CSS类,如...

    使用div仿javascript模态窗口

    /* 自动垂直居中 */ padding: 20px; border: 1px solid #888; width: 80%; /* 宽度自适应 */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus ...

    使用bootstrap3开发响应式网站

    此外,Bootstrap 3还提供了许多其他组件,如导航条(navbar)、按钮(button)、表单(form)、卡片(card)、模态框(modal)等,以及预定义的CSS类,如文本对齐、间距调整、颜色样式等,这些都可以灵活组合使用,...

    jquery插件弹出层

    verticalCenter: true // 是否垂直居中 }); ``` 此外,还可以监听弹出层的生命周期事件,比如`onShow`和`onHide`,以执行特定的操作。 总之,“jquery插件弹出层”是网页设计中增强用户体验的一个重要工具,通过...

    js实现类bootstrap模态框动画

    对话框则应水平居中显示,垂直位置根据设计需求调整。动画效果通常包括渐显和从顶部滑下的动态呈现。 实现模态框的动画,首先需要设置遮罩层。使用CSS,我们可以创建一个固定定位(position: fixed)的全屏元素,并...

Global site tag (gtag.js) - Google Analytics