Bootstrap modals don't work with dropdown menu in Liferay

Question

this question relates to my previous question. I use Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I would like to use modal windows created in Bootstrap 2.3.2. Thanks to answer in previous question I am able to show Bootstrap modals in Liferay. The problem is when I use dropdown menu with buttons, which open modal windows.

Button group

<div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  Add
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
           <li><a href="" id="addVertexModalA" onclick="$('#addVertexModal').modal();" > Vertex1 </a></li>
           <li><a href="" id="addVertexModalB"> Vertex2 </a></li>
       </ul>
       <button onclick="$('#addVertexModal').modal();">Show</button>
</div>

When I click on Vertex1 or Vertex2 button in dropdown-menu, the modal window disappears immediately after showing. If I click on Show button, it is okay.

Modal window

<div id="addVertexModal" class="modal fade" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="addVertexModalHeader"> Add Vertex </h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label"> names </label>
    <div class="controls">
      <textarea rows="3"></textarea>
    </div>
  </div>
</form>
  </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true"> Cancel </button>
        <a href="" class="btn btn-primary"> Confirm </a>
    </div>
</div>

    <script>

        $(document).on("click","#addVertexModalB",function() {      
           $("#addVertexModal").modal("show");  
        });

    </script>

I use only these resources in portal.

<header-portlet-javascript>/scripts/jquery-1.9.1.js</header-portlet-javascript>
<header-portlet-javascript>/scripts/bootstrap_2.3.2.js</header-portlet-javascript>

I would like to provide jsfiddle or something similar, but it doesn't work in Liferay system (I guess because of AlloyUI css or script files). I tried to remove dropdown-menu class and "dropdown-toggle" class with data-toggle="dropdown", but it didn't help (modal still disappears immediately after showing).

Answer 1

Remove href="" from your <a> tags. When you click on the list item with <a href="" ... />, it causes a GET on the page which reloads the whole page (thus causing your onclick to never execute and show the modal).