title: Bootstrap modals don't work with dropdown menu in Liferay
body: <p>this question relates to my <a href="https://stackoverflow.com/questions/27584434/bootstrap-modal-in-liferay">previous question</a>. 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.</p>
  
  <p><strong>Button group</strong></p>
  
  <pre><code>&lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                    Add
            &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class="dropdown-menu"&gt;
             &lt;li&gt;&lt;a href="" id="addVertexModalA" onclick="$('#addVertexModal').modal();" &gt; Vertex1 &lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="" id="addVertexModalB"&gt; Vertex2 &lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
         &lt;button onclick="$('#addVertexModal').modal();"&gt;Show&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on <strong>Vertex1</strong> or <strong>Vertex2</strong> button in <strong>dropdown-menu</strong>, the modal window disappears immediately after showing. If I click on <strong>Show</strong> button, it is okay.</p>
  
  <p><strong>Modal window</strong></p>
  
  <pre><code>&lt;div id="addVertexModal" class="modal fade" style="display: none;"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h3 id="addVertexModalHeader"&gt; Add Vertex &lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;form class="form-horizontal"&gt;
    &lt;div class="control-group"&gt;
      &lt;label class="control-label"&gt; names &lt;/label&gt;
      &lt;div class="controls"&gt;
        &lt;textarea rows="3"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
    &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt; Cancel &lt;/button&gt;
          &lt;a href="" class="btn btn-primary"&gt; Confirm &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;script&gt;
  
          $(document).on("click","#addVertexModalB",function() {      
             $("#addVertexModal").modal("show");  
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>I use only these resources in portal.</p>
  
  <pre><code>&lt;header-portlet-javascript&gt;/scripts/jquery-1.9.1.js&lt;/header-portlet-javascript&gt;
  &lt;header-portlet-javascript&gt;/scripts/bootstrap_2.3.2.js&lt;/header-portlet-javascript&gt;
  </code></pre>
  
  <p>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 <strong>dropdown-menu</strong> class and <strong>"dropdown-toggle"</strong> class with <strong>data-toggle="dropdown"</strong>, but it didn't help (modal still disappears immediately after showing).</p>