AJAX 성공 후 모드 창을 닫으려면 어떻게 해야 합니까?

AJAX 성공 후 모드 창을 닫으려면 어떻게 해야 합니까?

모달을 여는 버튼이 있는데 배경이나 ESC키를 클릭하여 모달이 닫히는 것을 막았습니다.

내 단추는 다음과 같습니다.

<button data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false">Click </button>

다음에 이 모드를 닫으려면 어떻게 해야 합니까?$.ajaxjQuery를 이용한 성공?

몇 가지 테스트를 해봤습니다. 모드가 닫혔지만 배경이 잠겨 페이지를 새로 고치기 전에는 아무것도 할 수 없습니다.

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

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

ajax success에서 이 코드를 사용합니다.

피들 데모

일반적인 방법이 없는 것 같아 이 솔루션을 추가합니다.

성공 시 모드를 종료하고 싶지만 서버에 $.ajax 호출할 때마다 수작업으로 작업하지 않으려면 다음을 사용할 수 있습니다.

$('.modal form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serializeObject(),
        contentType: 'application/json',
        beforeSend: function(xhr){xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")},
        success: function(data) {
            console.log(data.success);
            if(data.success===1) {
                // loop through all modal's and call the Bootstrap
                // modal jQuery extension's 'hide' method
                $('.modal').each(function(){
                    $(this).modal('hide');
                });
                console.log('success');
            } else {
                console.log('failure');
            }
        }
    });
});

별도로, 위의 코드를 복사/붙여넣기로 사용하고자 한다면, 서버에 포스팅하기 위해 양식 데이터를 취하고 JSON으로 변환하는 아래의 내용이 필요할 것입니다.$(this).serializeObject()로.$(this).serialize():

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    o = { request: o };
    return o;
};

참조:부트스트랩 JS 모달

당신은 다음과 같은 것을 시도할 수 있습니다.

 $( document ).ready(function() {               
        $(".btn").button().click(function(){         // button click

                $('#CompanyProfile').modal('show')   // Modal launch
                     $.ajax({
                              type: "POST",
                              url: "url",
                              data:{data:data},
                              cache: false,                         
                              success: function(data) { 
                                                  $('.text').html(data); 
                                                 }
                   })                          
         });   
  });

모드가 한 번만 실행되도록 합니다.

당신은 아래와 같은 것을 시도해 볼 수 있습니다.테스트는 안했지만 아이디어는 알 수 있을 겁니다.

$.ajax({
  url: 'yourscript.php',
  data: $('form#yourForm').serialize(),
  type: 'post'
}).done(function(response) { 
  // trigger modal closing here since ajax is complete.
});

나는 내 모달을 정의합니다.

  <div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

그런 다음 create 함수를 사용합니다.

var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");

}

내 생각은 아약스가 성공한 후 함수 StopLoadingAnimation을 호출하고 요소 btnCloseModal에서 이벤트 클릭을 트리거하는 것입니다(모달을 닫을 때 버튼 btnCloseModal을 클릭하는 것과 같습니다).

사용하다$('#YourModalId').modal('toggle');다른 모달의 내부(위)에 있는 모달을 목표로 하는 경우

다음과 같이 모드 내부에 단추를 만듭니다.

<button type="button" class="close" id="closemodal" data-dismiss="modal" aria-label="Close">

그럼, 당신의 아약스에서:

$.ajax({
  type: "POST",
  url: "yourcode.php",
  cache: false,
  data: dataString,
  success: function(html) {
    $('#closemodal').click ();
  }
})

도움이 되길 바랍니다!

setTimeout을 사용합니다.

setTimeout(function () {
  $('#CompanyProfile').modal('hide');
}, 1000);

success :function(){
              console.log("success");
              $('#contact_modal').html("<img src='img/bg/success.gif'>").delay(3000).fadeOut(450);
              $('body').removeClass('modal-open');
              $('.modal-backdrop.show').css('opacity','0');
              $('.modal-backdrop').css('z-index','-1')
          }

언급URL : https://stackoverflow.com/questions/35773985/how-do-i-close-a-modal-window-after-ajax-success