Bootstrap 引导模式仅触发背景

0x6upsns  于 2022-12-20  发布在  Bootstrap
关注(0)|答案(4)|浏览(167)

几个小时以来,我一直在尝试找到解决这个问题的方法,但由于某种原因,引导模式没有出现,只有背景出现。
我已经检查了代码,以匹配正确的语法,我已经包括了正确的文件,并在正确的顺序。我把这些文件从我的另一个网站上,它的工作完美,但不是在这里。我只有一个其他的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">&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>
jutyujz0

jutyujz01#

你有没有试过将id更改为更有效的id名称?例如“#mymodal”.也许你可以试着看看这个valid ID names

iyzzxitl

iyzzxitl2#

在最上面的div上缺少tabindex="-1" role="dialog"
参见模态文档:Bootstrap模态示例

j13ufse2

j13ufse23#

另外,请检查"数据目标"和div的ID是否相同。一旦从ID中删除"#",请检查。

另外,将tabindex ="-1" role ="dialog"添加到模态中。

w46czmvw

w46czmvw4#

我也遇到过同样的问题,我只是把模态函数放在了另一个隐藏的div中,所以我看不到它。有时一个坏的 Bootstrap 也会导致这个问题。

相关问题