使用锚标签打开Bootstrap Modal

Question

I am trying to open a Bootstrap Modal using the anchor tag. This is my 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>

When I click on the anchor tag for create group chat , the background blacks out but the actual dialog box does not appear. My website has another Bootstrap Modal that load when the page first loads, so I am not sure if this problem is being caused by a naming conflict. This Modal is named createModal and the other one I am using is called myModal

Answer 1

Try moving the modal outside of the li element.

Also, to get the fiddle working, you just need to add the external references to bootstrap.