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

나는 여기에있는 게시물, 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');

그것이 작동하고 모달이 닫히면 가까운 자바 스크립트가 서버에서 브라우저로 올바르게 전송 되지 않는 것입니다.

작동하지 않으면 클라이언트에 대해 추가로 조사해야합니다. 예를 들어 동일한 ID를 가진 두 개의 요소가 없는지 확인하십시오. 예를 들어 페이지로드 후 처음으로 작동하지만 두 번째로는 작동하지 않습니까?

브라우저 콘솔 : firefox 용 firebug, Chrome 또는 Safari 용 디버깅 콘솔 등

부트 스트랩 모달 을 닫으 려면 다음과 같이 모달 방법에 옵션으로 '숨기기' 를 전달할 수 있습니다

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

여기 에서 바이올린 작업을 살펴보십시오.

부트 스트랩은 모달 기능에 연결할 수있는 이벤트를 제공합니다 . 모달이 사용자로부터 숨겨 졌을 때 이벤트를 시작하려는 경우 hidden.bs.modal 이벤트를 사용 하면 모달 메서드 및 이벤트에 대한 자세한 내용을 볼 수 있습니다. 선적 서류 비치

위의 방법으로 작동하지 않으면 닫기 버튼에 ID를 부여하고 닫기 버튼을 클릭하십시오.

부트 스트랩 3.4를 사용합니다.이 기능이 작동하지 않습니다

$('#myModal').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(); 

나는 비슷한 문제라고 생각하는 것에 부딪쳤다. 는 $('#myModal').modal('hide');이 기능을 통해 가능성이 실행하고 선을 명중

if (!this.isShown || e.isDefaultPrevented()) return

문제는 모달이 표시되고 값이 true 인 경우에도 isShown 값이 정의되지 않을 수 있다는 것입니다. 부트 스트랩 코드를 다음과 같이 약간 수정했습니다.

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

이것은 대부분 문제를 해결하는 것으로 보였습니다. 배경이 여전히 남아 있으면 항상 통화를 추가하여 숨기기 통화 후에 수동으로 제거 할 수 있습니다 $('.modal-backdrop').remove();. 전혀 이상적이지 않지만 작동합니다.

(부트 스트랩 3 참조), 모달을 숨기려면 : $('#modal').modal('hide'). 그러나 배경이 (나를 위해) 매달려있는 이유는 '숨기기'가 끝나기 전에 모달의 DOM을 파괴했기 때문입니다.

이 문제를 해결하기 위해 숨겨진 이벤트를 DOM 제거와 연결했습니다. 나의 경우에는:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

"표시된"콜백이 발생한 후 전화를 거는 것이 더 좋았습니다.

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

이를 통해 hide () 호출 전에 모달을로드 할 수있었습니다.

우리가 발견 한 것은 서버 코드 호출과 성공 콜백 리턴 사이에 약간의 지연이 있다는 것입니다. $("#myModal").on('hidden.bs.modal', function (e)핸들러 에서 서버 호출을 래핑 한 다음 $("#myModal").modal("hide");메소드 를 호출 하면 브라우저가 모달을 숨기고 서버 측 코드를 호출합니다.

다시 말하지만, 우아하지는 않지만 기능적입니다.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

보시다시피, myFunc호출되면 모달을 숨기고 서버 측 코드를 호출합니다.

나는 같은 문제를 겪고 있었고 약간의 실험 후에 해결책을 찾았습니다. 클릭 핸들러에서 다음과 같이 이벤트 버블 링을 중지해야했습니다.

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

문서는 다음과 같습니다. http://getbootstrap.com/javascript/#modals-methods

방법은 다음과 같습니다. $ ( '# myModal'). modal ( 'hide')

다른 내용으로 모달을 여러 번 열어야하는 경우 (주요 js)를 추가하는 것이 좋습니다.

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

따라서 다음 개구부를 위해 내용을 청소하고 일종의 캐싱을 피하십시오.

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

심지어 같은 종류의 문제가 있습니다. 이것은 나에게 많은 도움이되었다

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

이 간단한 코드를 사용했습니다.

$("#MyModal .close").click();

$('#modal').modal('hide');data-dismiss="modal"취소 버튼의 속성으로 사용 하지 않으면 변형이 작동하지 않았습니다 . 당신과 마찬가지로, 내 요구는 일부 추가 논리에 따라 닫히거나 닫히지 않아야했기 때문에 링크가있는 링크를 클릭하면 data-dismiss="modal"안됩니다. data-dismiss="modal"클릭 핸들러를 프로그래밍 방식으로 호출 할 수 있는 숨겨진 버튼이 생겼습니다.

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

그런 다음 클릭 핸들러 내부에서 취소 할 수있는 모달을 닫을 때 취소하십시오.

$('#hidden-cancel').click();

이벤트 버블 링을 관리해야합니다. 한 줄의 코드를 추가해야 함

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

나는 이것이 오래된 질문이라는 것을 알고 있지만, 이것들 중 어느 것도 내가 정확히 찾고있는 것이 아니라는 것을 알았습니다. 표시가 끝나기 전에 모달을 닫으려고 한 것 같습니다.

내 솔루션은 @ schoonie23의 답변을 기반으로했지만 몇 가지 사항을 변경해야했습니다.

먼저 스크립트 상단에 전역 변수를 선언했습니다.

<script>
    var closeModal = false;
    ...Other Code...

그런 다음 모달 코드에서 :

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

그런 다음 : (show 이벤트가 호출 될 때 트리거되는 'show'와 반대로 모달이 완전히 표시되었음을 나타내는 'shown.bs.modal'이라는 이름에 유의하십시오. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

이것이 언젠가 누군가에게 추가 연구를 구하기를 바랍니다. 이 문제를 해결하기 전에 솔루션을 찾는 데 약간의 시간을 보냈습니다.

나는이 코드를 사용했다-

페이드 아웃을 사용하여 부드러운 효과로 모달을 숨 깁니다.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

모달에서 close 클래스를 사용하는 경우 다음이 작동합니다. 유스 케이스에 따라 클로즈 클래스가있는 모달이 둘 이상인 경우 일반적으로 보이는 모달로 필터링하는 것이 좋습니다.

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

document.getElementById ( 'closeButton'). click (); // data-dismiss = "modal"속성을 모달의 요소에 추가하고이 ID를 지정하십시오.

이것은 나쁜 습관이지만 자바 스크립트에서 닫기 버튼을 호출 하여이 기술을 사용하여 모달을 닫을 수 있습니다. 3 초 후에 모달이 닫힙니다.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

이것은 HTML로만 수행 할 수 있습니다.

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>