title: How to hide Bootstrap modal with javascript?
body: <p>I've read the posts here, the Bootstrap site, and Googled like mad - but can't find what I'm sure is an easy answer...</p>
  
  <p>I have a Bootstrap modal that I open from a link_to helper like this:</p>
  
  <pre><code>&lt;%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' =&gt; 'modal', 'data-target' =&gt; "#myModal",  class: "btn btn-primary"} %&gt;
  </code></pre>
  
  <p>In my <code>ContactsController.create</code> action, I have code that creates <code>Contact</code> then passes off to <code>create.js.erb</code>. In <code>create.js.erb</code>, I have some error handling code (a mix of ruby and javascript). If everything goes well, I want to close the modal.</p>
  
  <p>This is where I'm having trouble. I can't seem to dismiss the modal when all goes well. </p>
  
  <p>I've tried <code>$('#myModal').modal('hide');</code> and this has no effect. I've also tried <code>$('#myModal').hide();</code> which causes the modal to dismiss but leaves the backdrop. </p>
  
  <p>Any guidance on how to close the modal and/or dismiss the backdrop from within <code>create.js.erb</code>?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here's the markup for myModal:</p>
  
  <pre><code>&lt;div class="modal hide" id="myModal" &gt;
    &lt;div class="modal-header"&gt;
      &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
      &lt;h3&gt;Add Contact&lt;/h3&gt;
      &lt;div id="errors_notification"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;%= form_for :contact, url: contacts_path, remote: true do |f| %&gt;  
        &lt;%= f.text_field :first_name, placeholder: "first name" %&gt;
        &lt;%= f.text_field :last_name, placeholder: "last name" %&gt;
        &lt;br&gt;
        &lt;%= f.submit "Save", name: 'save', class: "btn btn-primary" %&gt;
        &lt;a class="close btn" data-dismiss="modal"&gt;Cancel&lt;/a&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>