自定义BOOTSTRAP框架Modal的宽高和显示位置

转自：

Bootstrap框架的的一些默认功能可能现在无法满足我们对实际项目的需要, 比如javascript中的jquery插件 Modal.他的modal-body大小可能适合我们的实际需要.所以现在我们来看下如何自定义.

改变Bootstrap Modal的默认高度

如果你需要改变modal-body的高度使它自适应的话可以在自己的CSS里写入下面的代码.

#myModal .modal-body { max-height: 800px; } 

注意.我们这里设置的是max-height在Modal-body类元素上,而不是Modal盒子类.这样的话就可以说在800px的高度内隐藏滚动条了, 除非你的内部元素高度超出800px

改变Bootstrap Modal的默认宽度

按照下面的样式来重写bootstrap的Modal最大宽度

#myModal { /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/ width: 900px; /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */ margin: -250px 0 0 -450px; } 

这里设置了Modal的固定宽度为900PX, 注意这里的宽度不是modal-body的宽度, 这时候如果要让弹出的Modal居中的话,就要修改Modal的Margin-left了, 从原来的-280px 改为 -450px(900/2)

更改bootstrap Modal 的屏幕显示位置

如下代码:

#myModal { margin: -300px 0 0 -280px; /* PLAY THE WITH THE VALUES TO SEE GET THE DESIRED EFFECT */ } 

从上面的几步来看, 如你所愿, 是不是已经可以改变Modal的显示位置和大小了??