부트 스트랩 모달 닫기

처음에 표시하려는 부트 스트랩 모달 대화 상자가 있는데 사용자가 페이지를 클릭하면 사라집니다. 나는 다음을 가지고있다 :

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

모달은 처음에 표시되지만 모달 외부를 클릭해도 닫히지 않습니다. 또한 내용 영역이 회색으로 표시되지 않습니다. 처음에 모달을 표시 한 다음 사용자가 영역 외부를 클릭 한 후 닫는 방법은 무엇입니까? 데모 에서처럼 배경을 회색으로 표시하려면 어떻게해야합니까?

modal('toggle')대신에 넣어modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

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

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

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

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

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

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

또는

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

작동해야합니다.

그러나 아무것도 작동하지 않으면 모달 닫기 버튼을 직접 호출 할 수 있습니다.

$("#modal .close").click()

이것은 나를 위해 일했다 :

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

이 링크 사용 모달 가까이

$("#your-modal-id").modal('hide');

수업 ($(".my-modal"))을 통해이 통화를 실행하면 작동하지 않습니다.

이 시도

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

이것은 꽤 좋으며 각도 2에서도 작동합니다.

$("#modal .close").click()

이것에 대한 나의 5 센트는 id로 부트 스트랩 모달을 대상으로하고 싶지 않으며 한 번에 하나의 모달 만 있어야한다는 것을 알기 때문에 토글이 위험 할 수 있으므로 모달을 제거하기에 충분해야합니다. :

$('.modal').removeClass('show');

경우에 따라 입력 오류가 원인 일 수 있습니다. 예를 들어 다음이 있는지 확인하십시오.

data-dismiss="modal"

그리고 아닙니다

data-dissmiss="modal"

두 번째 예에서 이중 "ss"는 닫기 단추가 실패하게합니다.

다음과 같은 방법으로 모달 팝업을 닫을 수 있습니다.

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

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

한 페이지에 여러 모달 팝을 사용하는 경우 위의 코드를 사용하여 모달의 배경을 숨길 수 있습니다.

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

당신이 사용할 수있는;

$('#' + $('.modal.show').attr('id')).modal('hide');

modal.hide를 사용하면 모달 만 숨길 수 있습니다. 모달 아래 오버레이를 사용하는 경우 여전히 모달입니다. 클릭 호출을 사용하여 실제로 모달을 닫고 오버레이를 제거하십시오.

$("#modalID .close").click()

이를 수행하는 또 다른 방법은 먼저 모달을 닫는 모달 열기 클래스를 제거하는 것입니다. 그런 다음 모달의 회색 커버를 제거하는 클래스 모달 배경을 제거하십시오.

다음 코드를 사용할 수 있습니다 :

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

이 트릭으로 프로그래밍 방식으로 모달을 닫았습니다.

로 모달에 버튼을 추가하고로 버튼을 data-dismiss="modal"숨 깁니다 display: none. 여기 어떻게 생겼는지

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

프로그래밍 방식으로 모달을 닫으려면 클릭 이벤트를 트리거하십시오. 해당 버튼에서 를 사용자에게 보이지 않습니다.

Javascript에서는 다음과 같이 해당 버튼을 클릭 할 수 있습니다.

document.getElementById('close-modal').click();

이 코드는 모달을 닫는 데 완벽하게 작동했습니다 (부트 스트랩 3.3을 사용하고 있습니다)

$('#myModal').removeClass('in')

필자의 경우 부트 스트랩 모달이 트리거 된 메인 페이지는 $("#modal").modal('toggle');방법 을 사용한 후 응답하지 않고 다음과 같은 방식으로 응답하기 시작했습니다.

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

이것은 잘 작동합니다

$(function () {
   $('#modal').modal('toggle');
});

그러나 여러 모달이 서로 겹쳐 쌓이면 효과가 없으므로 대신 작동합니다.

data-dismiss="modal"

일부 테스트 후 부트 스트랩 모달의 경우 $(.modal).modal('hide')after execution을 실행 하기 전에 잠시 기다려야한다는 것을 알았습니다 $(.modal).modal('show'). 그리고 내 경우에는 둘 사이에 적어도 500 밀리 초 간격이 필요하다는 것을 알았습니다.
그래서 이것은 내 테스트 사례 및 솔루션입니다.

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

이 참조를 볼 수 있지만이 링크가 제거 된 경우 다음 설명을 읽으십시오.

한 줄의 JavaScript로 id가 myModal 인 모달을 호출하십시오.

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

옵션

데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다. 데이터 속성의 경우 data-backdrop = "" 과 같이 옵션 이름을 data-에 추가하십시오 .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

행동 양식

비동기 메서드 및 전환

모든 API 메소드는 비동기식이며 전환을 시작합니다. 전환이 시작 되 자마자 종료되기 전에 발신자에게 돌아갑니다. 또한 전환 구성 요소에 대한 메서드 호출은 무시됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오.

. 모달 (옵션)

콘텐츠를 모달로 활성화합니다. 선택적 옵션 개체를 허용합니다.

$('#myModal').modal({
   keyboard: false
})

.modal ( '토글')

모달을 수동으로 토글합니다. 모달이 실제로 표시되거나 숨겨 지기 전에 (즉, shown.bs.modal 또는 hidden.bs.modal 이벤트가 발생 하기 전에) 호출자에게 반환 합니다.

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

.modal ( 'show')

모달을 수동으로 엽니 다. 모달이 실제로 표시 되기 전에 (즉, shown.bs.modal 이벤트가 발생하기 전에) 호출자에게 반환 합니다.

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

.modal ( 'hide')

모달을 수동으로 숨 깁니다. 모달이 실제로 숨겨 지기 전에 (즉, hidden.bs.modal 이벤트가 발생하기 전에) 호출자에게 반환 합니다.

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

.modal ( 'handleUpdate')

모달이 열려있는 동안 모달의 높이가 변하면 (예 : 스크롤 막대가 나타나는 경우) 모달의 위치를 ​​수동으로 다시 조정하십시오.

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

.modal ( 'dispose')

요소의 모달을 파괴합니다.

행사

부트 스트랩의 모달 클래스는 모달 기능에 연결하기위한 몇 가지 이벤트를 노출합니다. 모든 모달 이벤트는 모달 자체 (예 : **)에서 시작됩니다. 타입 설명

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

또한 'x'를 "클릭"하면 대화 상자가 닫힙니다. 예 :

$(".ui-dialog-titlebar-close").click();

제 경우에는 버튼을 사용하여 모달을 표시했습니다.

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

그래서 내 코드에서 모달을 닫으려면 (id = 'my-modal-to-show'가 있음) 해당 함수를 호출합니다 (Angular typescript).

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

$ (modalId) .modal ( 'hide')을 호출하면 작동하지 않으며 이유를 모릅니다.

추신 : 내 모달에서 버튼 요소도 .close 클래스로 코딩했습니다.

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

때로는 솔루션이 작동하지 않아서 클래스를 올바르게 제거하고 CSS 디스플레이를 추가해야합니다.

$("#modal").removeClass("in");
$("#modal").css("display","none");