javascript - 使用 anchor 标记打开 Bootstrap Modal

Question

我正在尝试使用 anchor 标记打开 Bootstrap Modal。这是我的 HTML:

   <ul class="dropdown-menu">
      <li><a data-toggle="modal" href="#createModal">create group chat</a>
             <!-- Modal -->
                  <div class="modal fade" id="createModal" role="dialog">
                    <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">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                          <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                      </div>

                    </div>
                  </div>
              </li>

当我点击创建群聊的 anchor 标记时，背景变黑，但实际的对话框没有出现。我的网站有另一个 Bootstrap Modal 在页面首次加载时加载，所以我不确定这个问题是否是由命名冲突引起的。该模态名为 createModal，我使用的另一个模态名为 myModal

Answer 1

尝试将模态框移到 li 元素之外。

此外，要使 fiddle 正常工作，您只需将外部引用添加到 Bootstrap 即可。