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

lottoking 2020. 3. 28. 10:42

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

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

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

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

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

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

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

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

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

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

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

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

필사적으로 나는 이것을했다 :

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

어쩌면 우아하지는 않지만 작동합니다.

동일한 오류가 발생 했으며이 코드 줄이 실제로 도움이됩니다.

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

부트 스트랩이있는 모달을 숨기고 표시하는 가장 좋은 양식

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

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

(부트 스트랩 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').modal('hide');이 기능을 통해 가능성이 실행하고 선을 명중

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

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

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

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

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

$('#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" });

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

$("#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'이라는 이름에 유의하십시오. (원래는 'shown'을 시도했지만 작동하지 않았습니다. )

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

이것이 언젠가 누군가에게 추가 연구를 구하기를 바랍니다. 나는 이것을 생각해 내기 전에 약간의 해결책을 찾았다.

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

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

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

이것은 나쁜 습관이지만 자바 스크립트에서 닫기 버튼을 호출 하여이 기술을 사용하여 모달을 닫을 수 있습니다. 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>

나는이 코드를 사용했다-

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

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

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

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

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

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

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

data-dismiss="modal"

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

참고 URL : https://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-with-javascript

'IT' 카테고리의 다른 글

npm을 사용하는 동안 오류 수신 : '오류 : SSL 오류 : SELF_SIGNED_CERT_IN_CHAIN' (0)	2020.03.28
NumPy 배열에 추가 열을 추가하는 방법 (0)	2020.03.28
로컬 네트워크에서 유효한 모든 IP 주소 목록을 얻는 방법은 무엇입니까? (0)	2020.03.28
정규식과 일치하는 문자열인지 확인하기위한 regex.test VS string.match (0)	2020.03.27
MIME 유형으로 인해 스타일 시트가로드되지 않았습니다. (0)	2020.03.27

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

내가 바로 로또왕!

C#, javascript, 연극, 놀거리, 여행, 무비순위, c++, 공연, 볼거리, Java, jquery, DVD순위, 관광, spring3, 행사, 영화순위, 뮤지컬, 자바, spring, 축제,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

lottoking