几个小时以来,我一直在努力寻找解决方案,但由于某种原因,引导模式没有显示,只显示了背景。
我已经检查了代码以匹配正确的语法,我已经按照正确的顺序包含了正确的文件。我从我的另一个网站上拿走了这些文件,它在这个网站上运行得很好,但不是在这里。我只有另外一个js文件,我也尝试过禁用它。
当我单击按钮时,我可以在控制台中看到bootstrap.js
将类应用于主体和背景元素,而不是.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>
您是否尝试将id更改为更有效的id名称?例如"#mymodal"。也许您可以尝试查看这个有效的ID名称
在最上面的div
上缺少tabindex="-1" role="dialog"
。
请参阅此处的模态文档:引导模态示例
还请检查,"data target"和div的id是否相同。一旦从id中删除"#"并进行检查。
<button type="button"数据切换="modal"数据目标="1">
同时将tabindex="-1"role="dialog"添加到模态中。
我也遇到了同样的问题,我只是把模态放在了另一个隐藏的div中,所以我看不到它。有时一个坏的引导程序也会导致它。