[javascript] 자바 스크립트로 부트 스트랩 모달을 숨기는 방법?

나는 여기에있는 게시물, Bootstrap 사이트 및 Googled를 미친 것처럼 읽었지만 쉬운 대답은 확실하지 않습니다 …

다음과 같이 link_to 도우미에서 여는 부트 스트랩 모달이 있습니다.

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

내 ContactsController.create행동에는 코드를 만들고에 Contact전달합니다 create.js.erb. 에서 create.js.erb오류 처리 코드 (루비와 자바 스크립트의 혼합)가 있습니다. 모든 것이 잘되면 모달을 닫고 싶습니다.

내가 어려움을 겪고있는 곳입니다. 모든 것이 잘되면 모달을 닫을 수 없습니다.

시도했지만 $('#myModal').modal('hide');효과가 없습니다. 나는 또한 $('#myModal').hide();모달이 사라지게하지만 배경을 남기 려고 시도했습니다 .

모달을 닫거나 백그라운드에서 배경을 해제하는 방법에 대한 지침은 create.js.erb무엇입니까?

편집하다

다음은 myModal의 마크 업입니다.

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

답변

$('#myModal').modal('hide');

$('#modal').modal('hide');

$('#myModal').hide();
$('.modal-backdrop').hide();

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

$("[data-dismiss=modal]").trigger({ type: "click" });

$('#modal').modal('hide');
//hide the modal

$('body').removeClass('modal-open');
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

$('.close').click();