Bootstrap Modal only triggering Backdrop

本文关键字：Backdrop triggering only Modal Bootstrap 更新时间：2023-09-26

几个小时以来，我一直在努力寻找解决方案，但由于某种原因，引导模式没有显示，只显示了背景。

我已经检查了代码以匹配正确的语法，我已经按照正确的顺序包含了正确的文件。我从我的另一个网站上拿走了这些文件，它在这个网站上运行得很好，但不是在这里。我只有另外一个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>

您是否尝试将id更改为更有效的id名称？例如"#mymodal"。也许您可以尝试查看这个有效的ID名称

在最上面的div上缺少tabindex="-1" role="dialog"。

请参阅此处的模态文档：引导模态示例

还请检查，"data target"和div的id是否相同。一旦从id中删除"#"并进行检查。

<button type="button"数据切换="modal"数据目标="1">

同时将tabindex="-1"role="dialog"添加到模态中。

我也遇到了同样的问题，我只是把模态放在了另一个隐藏的div中，所以我看不到它。有时一个坏的引导程序也会导致它。