[javascript] 부트 스트랩 모달 영역 외부의 클릭을 비활성화하여 모달을 닫습니다.

JAVASCRIPT / 글쓴이

Bootstrap ‘Modals’와 함께 부트 스트랩 웹 사이트를 만들고 있습니다. 기본 기능 중 일부를 사용자 정의하려고합니다.

문제는 이것입니다. 배경을 클릭하여 모달을 닫을 수 있습니다. 이 기능을 비활성화 할 수 있습니까? 특정 모달에서만?

부트 스트랩 모달 페이지

답변

옵션 장의 링크 한 페이지에서 backdrop옵션을 볼 수 있습니다. 이 옵션을 값으로 전달 'static'하면 모달이 닫히지 않습니다.
@PedroVagner가 주석에서 지적했듯이을 {keyboard: false}눌러 모달이 닫히지 않도록 전달할 수도 있습니다 Esc.

js로 모달을 여는 경우 다음을 사용하십시오. 

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

데이터 속성을 사용하는 경우 다음을 사용하십시오. 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`

답변

이것은 가장 쉬운 것입니다

데이터 키보드 및 데이터 배경을 정의하여 모달 동작을 정의 할 수 있습니다.

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

답변

다음과 같은 속성을 사용 data-backdrop="static"하거나 javascript와 함께 사용할 수 있습니다 . 

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

이 답변도 참조하십시오 : 트위터 부트 스트랩 모달 창 닫기를 허용 하지 않습니다

답변

내 응용 프로그램에서 아래 코드를 사용하여 jQuery를 통해 부트 스트랩 모달을 보여줍니다.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true,
                        show: true
                });

답변

당신이 사용할 수있는

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

기본 동작을 변경합니다.

답변

부트 스트랩 모델 영역 외부에서 클릭을 비활성화하여 모달을 닫는 방법은 두 가지가 있습니다.

  1. 자바 스크립트 사용

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

  2. HTML 태그에서 데이터 속성 사용

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.

답변

체크 아웃 ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });

    $("#click-me").click(function() {
       $("#popup").modal("show");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">

                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a>
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

스 니펫 확장