几个小时以来,我一直在尝试找到解决这个问题的方法,但由于某种原因,引导模式没有出现,只有背景出现。
我已经检查了代码,以匹配正确的语法,我已经包括了正确的文件,并在正确的顺序。我把这些文件从我的另一个网站上,它的工作完美,但不是在这里。我只有一个其他的js文件,我试图禁用它以及。
当我点击这个按钮时,我可以在控制台中看到bootstrap.js
将类应用于body和background元素,但没有应用于.modal
元素,就像它根本找不到那个类一样。
<button type="button" data-toggle="modal" data-target="#1"><i class="fa fa-clone"></i></button>
以及
<div id="1" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><h4>Dhananjay</h4></h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr class="active">
<th>Order ID</th><th>Source</th><th>Destination</th><th>Date</th><th>Cost</th><th></th>
</tr>
<tr>
<td>1</td><td>110034</td><td>113344</td><td> Thursday 19th November 2015</td><td>10</td> <!-- Change ID -->
</tr>
<tr>
<td>2</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
</tr>
<tr>
<td>3</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
</tr>
<tr>
<td>4</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
</tr>
<tr>
<td>5</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
4条答案
按热度按时间jutyujz01#
你有没有试过将id更改为更有效的id名称?例如“#mymodal”.也许你可以试着看看这个valid ID names
iyzzxitl2#
在最上面的
div
上缺少tabindex="-1" role="dialog"
。参见模态文档:Bootstrap模态示例
j13ufse23#
另外,请检查"数据目标"和div的ID是否相同。一旦从ID中删除"#",请检查。
另外,将tabindex ="-1" role ="dialog"添加到模态中。
w46czmvw4#
我也遇到过同样的问题,我只是把模态函数放在了另一个隐藏的div中,所以我看不到它。有时一个坏的 Bootstrap 也会导致这个问题。