[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;
기본 동작을 변경합니다.
답변
부트 스트랩 모델 영역 외부에서 클릭을 비활성화하여 모달을 닫는 방법은 두 가지가 있습니다.
-
자바 스크립트 사용
$('#myModal').modal({ backdrop: 'static', keyboard: false });
-
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>