CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Mahmud Adam
Mahmud Adam

Reputation: 3579

Opening Bootstrap Modal with anchor tag

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

Upvotes: 0

Views: 3834

Answers (1)

code4pi
code4pi

Reputation: 185

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.

Upvotes: 1

Related Questions