Twitter引导可滚动模态 [英] Twitter bootstrap scrollable modal

问题描述

我正在使用twitter启动项目。

I'm using twitter bootstrap for a project I am working on.

我有一个模态窗口，其中有一个更长的形式，我不喜欢，当窗口太小时，模态没有滚动消失了我的页面是不可滚动）。

I have a modal window that has a somewhat longer form in it and I didn't like that when the window got too small the modal didn't scroll (if just disappeared off my page which isn't scrollable).

为了解决这个问题，我使用了以下css

To fix this I used the following css

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

这完全符合我在Chrome中使用的方式窗体是足够大的，当窗口足够大，但随着窗口收缩模态收缩和变得可滚动）。问题是在IE中模态是关闭屏幕。有没有人有更好的解决这个问题的方法？

This works exactly the way I want it to in Chrome (that is, the form is full size when the window is big enough, but as the window shrinks the modal shrinks and becomes scrollable). The problem is that in IE the modal is off the screen. Does anyone have a better solution to this problem?

我的例子可以在tinyhousemap.com找到（点击导航窗口中的添加条目到地图 modal to appear）

My example can be found at tinyhousemap.com (click 'Add an Entry to the map' in the navigation window for the modal to appear)

感谢

推荐答案

？它为我工作。尝试此操作：

How about the below solution? It worked for me. Try this:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

详细信息：

1. 从.modal类中删除 overflow-y：auto; 或 overflow：auto; （重要）


2. 从删除 max-height：400px; .modal class（important）


3. 在.modal .modal-body中添加 max-height：400px; code> 420px 或以下，但不会超过 450px ）


4. code> overflow-y：auto; 到 .modal .modal-body

1. remove overflow-y: auto; or overflow: auto; from .modal class (important)
2. remove max-height: 400px; from .modal class (important)
3. Add max-height: 400px; to .modal .modal-body (or what ever, can be 420px or less, but would not go more than 450px)
4. Add overflow-y: auto; to .modal .modal-body

完成，只有主体会滚动。

Done, only body will scroll.

这篇关于Twitter引导可滚动模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！