title: Bootstrap modal toggle() and modal('show') behaving differently
body: <p>I'm using bootstrap 3.3.7 and I have a modal dialog that contains a form. For validating the form I use jquery validation 1.16.0. </p>
  
  <p>I show the modal with:</p>
  
  <pre><code>$('#myModal').modal('show');
  </code></pre>
  
  <p>I register a function for the submit button's click that checks if the validation succeeds with:</p>
  
  <pre><code>$('#myForm').valid()
  </code></pre>
  
  <p>and if so, makes an ajax call.
  The submit button is enabled like this:</p>
  
  <pre><code>&lt;button type="submit" id="btnDo" data-dismiss="modal" class="btn btn-primary"&gt;Do&lt;/button&gt;
  </code></pre>
  
  <p>The issue is that the modal is dismissed even if the validation of the form fails. If the modal is shown again, the validation error messages are there, so the validation itself performs properly, it's just the dialog that gets dismissed.</p>
  
  <p>I managed to solve this issue by showing the modal with:</p>
  
  <pre><code>$('#myModal').toggle();
  </code></pre>
  
  <p>instead of modal('show').
  However, a new annoyance appeared, the modal is not scroll-able anymore, which I had to solve by setting style="overflow-y: scroll;" on the modal div.</p>
  
  <p>So, my 2 questions are:</p>
  
  <ol>
  <li>What's the difference between showing a modal with toggle() vs
  modal('show'), that stopped the modal from being dismissed when the
  form validation failed?</li>
  <li>Why using toggle() makes the modal
  non-scroll-able?</li>
  </ol>
  
  <p>Thanks.</p>
  
  <p><strong>Updated</strong></p>
  
  <p>As requested, I included some relevant code. </p>
  
  <p>The relevant HTML:</p>
  
  <pre><code>&lt;input type="button" id="btnShow" value="Show modal" /&gt;
  
  &lt;div id="myModal" class="modal"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-body"&gt;
              &lt;form id="myForm" class="well form-horizontal"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="inputName"&gt;Name&lt;/label&gt;
                      &lt;div&gt;
                          &lt;input class="form-control"
                                 required 
                                 type="text"
                                 id="inputName"
                                 name="inputName"
                                 data-val="true"
                                 data-val-required="The name is required." /&gt;
                          &lt;div class="text-danger" data-valmsg-for="inputName" data-valmsg-replace="true"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" id="btnDo" data-dismiss="modal" class="btn btn-primary"&gt;Do&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The script:</p>
  
  <pre><code>$('#btnShow').click(function() {
    $('#myModal').modal('show');
  });
  
  $('#btnDo').click(function() {
    console.log('Is my form valid? - ' + $('#myForm').valid());
  });
  </code></pre>