bootstrap中modal模态框实现在页面中水平垂直居中的方法


bootstrap是个前端懒人神器,样式舒服,布局顺畅,但是自带的modal模态框默认是水平居中,但是垂直位置偏页面上方。如果想要实现水平并且垂直居中的效果,需要自己写个css样式重新定义一下位置。官方给的例子中模态框的默认id是myModal,默认带有固定定位(position:fixed;)的样式。

咱们只需在自己的css中重写一下这个样式即可:

#myModal{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

经过重新定义后会发现在移动端模态框的宽度太小了,我们还可以继续优化一下,设置一个最小宽度,最终代码如下:

#myModal{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    min-width:80%;/*这个比例可以自己按需调节*/
 }

其他需要的样式可以继续自由发挥。


2018年最新更新:文章发表后有朋友留言反映,按照上述方法实现模态框居中后偶尔会出现滚动条(如上图所示),我测试了一下,在浏览器高度较小的时候的确会有这个问题。不过不用担心,将上述写法完善一下就行了,完善后的写法如下:

#myModal{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    min-width:80%;/*这个比例可以自己按需调节*/
    overflow: visible;
    bottom: inherit;
    right: inherit;
 }

 

 

 

评论
发表评论 说点什么