Twitter 부트 스트랩 모달 창을 닫을 수 없음

Twitter Bootstrap을 사용하여 모달 창을 만들고 있습니다. 기본 동작은 모달 영역 외부를 클릭하면 모달이 자동으로 닫힙니다. 모달 외부를 클릭 할 때 모달 창을 닫지 마십시오.

누군가 jQuery 코드를 공유하여 이것을 할 수 있습니까?

배경 값 을 static 으로 설정하려고합니다 . Esc키를 사용할 때 창이 닫히지 않게하려면 다른 값을 설정해야합니다.

예:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

또는 JavaScript를 사용하는 경우 :

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

backdrop속성을로 설정하십시오 'static'.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

키보드 의 키를 눌러 모달이 닫히지 않도록 keyboard속성 을 설정할 수도 있습니다 .falseEsc

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

myModal 모달 콘텐츠가 포함 된 div의 ID입니다.

이러한 속성을 모달 정의 자체에 포함시킬 수도 있습니다.

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

모달 창을 이미 초기화 한 $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})경우 새 옵션이 적용되도록 옵션을 재설정 할 수 있습니다.

Dialog의 Bootstrap 'hide'이벤트를 재정의하고 기본 동작을 중지하십시오 (대화 상자를 삭제).

아래 코드 스 니펫을 참조하십시오

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

우리의 경우에는 잘 작동합니다.

예, 다음과 같이 할 수 있습니다 :

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

@AymKdn의 답변과 비슷하지만 모달을 다시 초기화하지 않고 옵션을 변경할 수 있습니다.

$('#myModal').data('modal').options.keyboard = false;

또는 여러 옵션을 수행 해야하는 경우 JavaScript가 with유용합니다!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

모달이 이미 열려 있으면이 옵션은 다음 에 모달을 열 때만 적용됩니다 .

이 두 가지를 추가하십시오

data-backdrop="static" 
data-keyboard="false"

이제 이렇게 보일 것입니다

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

이스케이프 버튼을 비활성화하고 아무 곳이나 클릭하고 숨길 수 있습니다.

페이지의 JavaScript를 페이지에 추가하여 배경의 클릭하여 닫기 동작을 비활성화하고 모든 모달의 기본값으로 설정할 수 있습니다 (jQuery 및 Bootstrap JS가로드 된 후 실행되는지 확인).

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

D3VELOPER가 말했듯이 다음 코드는이를 해결합니다.

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

jquery와 bootstrap을 모두 사용하고 있으며 단순히 removeData('modal')작동하지 않습니다.

내가 찾은 최고는이 코드를 링크에 추가하는 것입니다.

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

누군가가 모달을 닫는 것을 방지하는 방법을 알아 내려고 Google에 온 경우 모달 오른쪽 상단에 제거 해야하는 닫기 버튼이 있다는 것을 잊지 마십시오.

CSS를 숨겨서 사용했습니다.

#Modal .modal-header button.close {
    visibility: hidden;
}

"display : none;"사용 모달을 만들 때 덮어 쓰므로 사용하지 마십시오.

조건부로 backdrop click closing기능을 비활성화하려면 다음 줄을 사용하여 런타임 중에 backdrop옵션을 설정할 수 있습니다 static.

부트 스트랩 v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

부트 스트랩 v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

이렇게하면 backdrop옵션이 false( 기본 동작 ) 으로 설정된 이미 인스턴스화 된 모델이 닫히지 않습니다.

아래 코드 줄을 사용하여 모달 팝업의 기본 동작을 설정할 수 있습니다.

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

그렇게하는 것은 요즘 매우 쉽습니다. 다음을 추가하십시오.

data-backdrop="static" data-keyboard="false" 

모달 분배기에서.

글쎄, 이것은 당신들 중 일부가 찾고있는 또 다른 해결책입니다.

내 문제는 비슷했고 내부에 iframe을로드하는 동안 모달 상자가 닫히고 있으므로 Iframe 이로 드를 마칠 때까지 모달 해제를 비활성화 한 다음 다시 활성화해야했습니다.

여기에 제시된 솔루션은 100 % 작동하지 않았습니다.

내 해결책은 다음과 같습니다.

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

따라서 일시적으로 모달이 다음과 같이 닫히지 못하게합니다.

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

그러나 iframe 이로 드 된 후 닫기를 다시 활성화하는 var is_loading입니다.

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

모달이 표시된 후 Bootstrap 4.1.3에서 백 드롭 상태를 업데이트하기 위해 Bootstrap-Modal-Wrapper 플러그인 의 다음 줄을 사용했습니다 . 플러그인 리포지토리 코드 참조 .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");