【发布时间】：2014-08-09 06:07:01
【问题描述】：
我正在为我的表使用数据表插件，请注意我使用的是响应式数据表。 我也在使用引导程序 v3.2.0。我已经在引导模式对话框中放置了我的响应式数据表。但是我面临的问题是我的表格在模态对话框上没有响应，但它在普通页面上变得响应。 我发现如果我从模态代码中删除类名“模态”，它就会变得响应，所以很明显模态类正在产生问题，但我也不能删除模态类，否则模态将不起作用。
这是模态类的css：
.modal {
bottom: 0;
display: none;
left: 0;
outline: 0 none;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
z-index: 1050;
}
我的模态代码：
<div class=" fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send File Popup</h4>
</div>
<div class="modal-body">
<table id="filepopupTable" class="display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th class="padding10"> <div class="ckbox ckbox-default">
<input type="checkbox" id="selectall" value="1" class="mt0 mr10" />
<label for="selectall" class="mr5">Select All</label>
</div></th>
<th>File Name</th>
<th>Size</th>
<th>Uploaded On</th>
<th data-sort-ignore="true">Quick Action</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check1" value="1" />
<label for="check1"></label>
</div>
</td>
<td>Life brochure.doc</td>
<td>3 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
</td>
</tr>
<tr class="even gradeC">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check2" value="1" />
<label for="check2"></label>
</div>
</td>
<td>Provider_list.xlxs</td>
<td>34 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
</td>
</tr>
<tr class="odd gradeA">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check3" value="1" />
<label for="check3"></label>
</div>
</td>
<td>My_logo.png</td>
<td>443 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
请大家检查这个问题并尝试修复它。
非常感谢您的帮助！
【问题讨论】：
标签： twitter-bootstrap-3 modal-dialog jquery-datatables