首页 新闻 赞助 找找看

求一个bootstrap的modal框样式

0
[已关闭问题] 关闭于 2018-05-03 09:03

想做一个高度可以自适应内容的模态框。

内容越长,模态框越长,宽度是固定的。

在内容较短的时候模态框垂直居中,当内容很长的时候模态框最大高度浏览器窗口高度。内容部分可以上下滚动。

 1 <div id="MyModal" class="modal fade container in" tabindex="-1" style="display: block; padding-left: 17px;">
 2 
 3 <div class="MyModal-body modal-content">
 4     <div style="text-align:right;">
 5         <a data-dismiss="modal" aria-hidden="true" style="font-size:16px; margin-right:15px; color:grey">×</a>
 6     </div>
 7     <div style="
 8  9     overflow-y: auto;
10 ">
11         <table class="table table-bordered">
12             <thead>
13                 <tr>
14                             <th>Name</th>
15                 </tr>
16             </thead>
17             <tbody>
18                     <tr>
19                        
20                             <td >
21                                 Td1
22                             </td>
23                     </tr>
24 
25 ....
26                   <tr>
27                        
28                             <td >
29                                 t'dn
30                             </td>
31                     </tr>
32                     </tr>
33             </tbody>
34         </table>
35     </div>
36   
37     <div class="text-center">
38         <a class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</a>
39 
40     </div>
41 </div>
42 </div>

 

.MyModal-body {
    background: #fff;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100%;
    padding: 0 16px;
}

 

在内容(就是table的行数)较短的时候页面,模态框正常,内容长的时候,模态框的本身高度是窗口的100%,但是内部的元素比模态框本身要搞,如果直接在模态框上使用overflow会让整个模态框上下滚动

我想只让table的tbody上下滚动

当然所有的效果都可以使JS来计算完成, 但是我比较想用CSS做,请问各位大神有没有什么比较好的解决方法

写代码的相声演员的主页 写代码的相声演员 | 小虾三级 | 园豆:517
提问于:2018-04-12 16:54
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册