Question

我一直试图找到解决方案几个小时，但由于某种原因，自举模式没有显示，只有背景出现。

我已经检查了代码以匹配正确的语法，我已经包含了正确的文件并且顺序正确。我从我的另一个网站上获取了这些文件，但这些文件工作得很好但不在这里。我只有一个其他的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">&times;</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>

Answer 1

您在最顶层的tabindex="-1" role="dialog"上遗漏了div。

请参阅此处的模式文档：Bootstrap Modal Example

Answer 2

还请检查'data-target'，div的id是相同的。一旦从id中删除'＃'并检查。

＆lt; button type =“button”data-toggle =“modal”data-target =“1”＆gt;

还将tabindex =“ - 1”role =“dialog”添加到模态。

Bootstrap Modal仅触发Backdrop

2 个答案: