Bootstrap模态框无法通过点击打开（触发）

Question

Bootstrap模态框无法通过点击打开（触发）

5

我有一个模态框存在一些问题。我进行了大量搜索，发现有一些类似的问题是由于没有在data-target="#panel-modal2"中添加#引起的，但我的看起来没问题。需要帮助吗？

以下是我的HTML:

<div class="btn-group">
  <a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>
</div><!--.btn-group-->


<div class="modal modal-nutrition fade full-height from-right" id="panel-modal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="row">
          <div class="col-md-12">
            <h4 class="modal-title">Transfer</h4>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="row">

          </div>
          <div class="row margin-top-30">
            <div class="col-md-3">To:</div>
            <div class="col-md-9">
              <select class="selectpicker" data-width="100%">
                <option>- Select -</option>

              </select>
            </div>
          </div>
          <div class="row margin-top-30">
            <div class="col-md-3">Date:</div>
            <div class="col-md-9">
              <div class="control-group">
                <div class="controls">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                    <div class="inputer">
                      <div class="input-wrapper">
                        <input type="text" style="width: 200px" name="transferDate" class="form-control bootstrap-daterangepicker-basic" value="03/18/2013" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="note note-info note-left-striped">

            </div><!--.note-->
          </div><!--.col-md-12-->
        </div><!--.row-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-flat-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-flat-primary" data-dismiss="modal">Submit</button>
      </div>
    </div>
  </div>

- Michael Commons

你没有充分描述你的问题。你能在你的问题中包含更多细节吗？ - Daniel Cheung

我不确定这是否只是一个复制粘贴问题，但我认为您可能在结尾处缺少一个闭合的 </div> 标签。 - Riaan van Zyl

所有的div都正确地打开和关闭。 - Michael Commons

所以是复制粘贴的问题吗？当我复制你发布的代码时，我发现这个div：<div class="modal modal-nutrition fade full-height from-right"没有被关闭。 - Riaan van Zyl

可能是通过 jQuery 触发 Bootstrap 模态框的重复问题。 - Michael Commons

显示剩余2条评论

7个回答

2

在我的情况下，解决方案是更改按钮的属性。

正如您将在Bootstrap网站的HTML入门模板示例中看到的那样（https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop），Modal按钮具有以下属性：

- data-bs-toggle - data-bs-toggle 如果属性中包含 -bs-，请尝试将其删除：

- data-toggle - data-toggle 如果它们不包括它，请尝试包括它。

- TheoPlatica

这真是救了我的一天，不知道为什么会这样实施，你有什么想法吗？ - undefined

1

很高兴看到它对你有所帮助。这可能是HTML属性和JS代码之间的不匹配。 - undefined

1

请添加默认的jQuery和Bootstrap JS，您的模态弹出窗口将正常工作。请查看下面的代码片段以获取更多理解。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
  <a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>
</div><!--.btn-group-->


<div class="modal modal-nutrition fade full-height from-right" id="panel-modal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="row">
          <div class="col-md-12">
            <h4 class="modal-title">Transfer</h4>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="row">
            <div class="col-md-3">From:</div>
            <div class="col-md-9">Nursery</div>
          </div>
          <div class="row margin-top-30">
            <div class="col-md-3">To:</div>
            <div class="col-md-9">
              <select class="selectpicker" data-width="100%">
                <option>- Select -</option>
                <option>Nursery</option>
                <option>Toddlers</option>
                <option>Other kindergarten</option>
              </select>
            </div>
          </div>
          <div class="row margin-top-30">
            <div class="col-md-3">Date:</div>
            <div class="col-md-9">
              <div class="control-group">
                <div class="controls">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                    <div class="inputer">
                      <div class="input-wrapper">
                        <input type="text" style="width: 200px" name="transferDate" class="form-control bootstrap-daterangepicker-basic" value="03/18/2013" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="note note-info note-left-striped">
              <h4>Active Transfer</h4>
              <p>This person will transfer to Nursery on 14.05.2016</p>
              <p>If you submit a new transfer the active one will be overwrited.</p>
            </div><!--.note-->
          </div><!--.col-md-12-->
        </div><!--.row-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-flat-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-flat-primary" data-dismiss="modal">Submit</button>
      </div>
    </div>
  </div>

- Rahul Patel

我在HTML的最后一行添加了默认的jQuery和Bootstrap，但仍然无法正常工作。 - Michael Commons

控制台是否显示任何错误？Bootstrap JS和默认的jQuery是否有新版本？ - Rahul Patel

没有错误。我正在获取最新版本的Bootstrap，我在另一个页面中有类似的模态框，那里运行良好。 - Michael Commons

很奇怪。如果您已经包含了默认的jquery和bootstrap js，那么它应该可以正常工作，因此您的模态弹出窗口代码是完美的。首先，您是否已经包含了默认的jquery，然后再包含bootstrap js？ - Rahul Patel

是的，这就是顺序。 - Michael Commons

1

这可能是因为您使用了过旧或过新的jquery版本，不符合bootstrap v3.x.x的要求。请检查您的jquery版本（最大值）是否为2.2.4，因为您的代码没有问题，没有任何错误。

- busuu

1

试试这个

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group">
                                    <a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>
                                </div><!--.btn-group-->


<div class="modal modal-nutrition fade full-height from-right" id="panel-modal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <div class="row">
                <div class="col-md-12">
                    <h4 class="modal-title">Transfer</h4>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">From:</div>
                    <div class="col-md-9">Nursery</div>
                </div>
                <div class="row margin-top-30">
                    <div class="col-md-3">To:</div>
                    <div class="col-md-9">
                        <select class="selectpicker" data-width="100%">
                            <option>- Select -</option>
                            <option>Nursery</option>
                            <option>Toddlers</option>
                            <option>Other kindergarten</option>
                        </select>
                    </div>
                </div>
                <div class="row margin-top-30">
                    <div class="col-md-3">Date:</div>
                    <div class="col-md-9">
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                                    <div class="inputer">
                                        <div class="input-wrapper">
                                            <input type="text" style="width: 200px" name="transferDate" class="form-control bootstrap-daterangepicker-basic" value="03/18/2013" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="note note-info note-left-striped">
                        <h4>Active Transfer</h4>
                        <p>This person will transfer to Nursery on 14.05.2016</p>
                        <p>If you submit a new transfer the active one will be overwrited.</p>
                    </div><!--.note-->
                </div><!--.col-md-12-->
            </div><!--.row-->
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-flat-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-flat-primary" data-dismiss="modal">Submit</button>
        </div>
    </div>
</div>

- Shakir Ahamed

0

对于

元素，省略 data-target 属性，而是使用 href="#modalID" 代替；

- sandeep

0

将按钮属性从data-toggle更改为data-bs-toggle，并将data-target更改为data-bs-target

- Yugant Jha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Puneet · Accepted Answer

尝试在您的脚本标签中添加bootstrap.js。还要在bootstrap.js之前添加jquery.js。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


 <div class="btn-group">
                                    <a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>
                                </div><!--.btn-group-->


<div class="modal modal-nutrition fade full-height from-right" id="panel-modal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <div class="row">
                <div class="col-md-12">
                    <h4 class="modal-title">Transfer</h4>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">From:</div>
                    <div class="col-md-9">Nursery</div>
                </div>
                <div class="row margin-top-30">
                    <div class="col-md-3">To:</div>
                    <div class="col-md-9">
                        <select class="selectpicker" data-width="100%">
                            <option>- Select -</option>
                            <option>Nursery</option>
                            <option>Toddlers</option>
                            <option>Other kindergarten</option>
                        </select>
                    </div>
                </div>
                <div class="row margin-top-30">
                    <div class="col-md-3">Date:</div>
                    <div class="col-md-9">
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                                    <div class="inputer">
                                        <div class="input-wrapper">
                                            <input type="text" style="width: 200px" name="transferDate" class="form-control bootstrap-daterangepicker-basic" value="03/18/2013" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="note note-info note-left-striped">
                        <h4>Active Transfer</h4>
                        <p>This person will transfer to Nursery on 14.05.2016</p>
                        <p>If you submit a new transfer the active one will be overwrited.</p>
                    </div><!--.note-->
                </div><!--.col-md-12-->
            </div><!--.row-->
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-flat-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-flat-primary" data-dismiss="modal">Submit</button>
        </div>
    </div>
</div>