title: bootstrap modal not working from dropdown
body: <p>I tried to add a modal to dropdown menu but it won't work unless I click it twice or add a closing div to it.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div class="bs-example"&gt;
  &lt;form&gt;
      &lt;!--Default buttons with dropdown menu--&gt;
      &lt;div class="btn-group"&gt;
          &lt;button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a  href="#myModal" data-toggle="modal"&gt;edit&lt;/a&gt;&lt;/li&gt;  &lt;!-- i dont want to add a div here --&gt;
  
  
               &lt;div id="myModal" class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&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;h4 class="modal-title"&gt;Confirmation&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;Do you want to save changes you made to document before closing?&lt;/p&gt;
                  &lt;p class="text-warning"&gt;&lt;small&gt;If you don't save, your changes will be lost.&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And <a href="http://jsfiddle.net/zynxqdxx/2/" rel="nofollow"><strong>Fiddle here</strong></a> it might explain better</p>
  
  <p>The modal doesn't come up after clicking on "edit". You have to click Action once again for it to come up.</p>