부트스트랩 모달 닫기
처음에 보여주고 싶은 부트스트랩 모달 대화상자가 있는데, 사용자가 페이지를 클릭하면 사라집니다.다음 항목이 있습니다.
$(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').modal('toggle');
또는
$('#modal').modal().hide();
작동해야 합니다.
그러나 다른 방법이 없으면 모달 닫기 버튼을 직접 호출할 수 있습니다.
$("#modal .close").click()
이것은 나에게 효과가 있었습니다.
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
이 링크 모달 닫기 사용
사용해 보십시오.
$('#modal_id').modal('hide');
$("#your-modal-id").modal('hide');
통해 이 ($(".my-modal"))작동하지 않습니다.
이것은 꽤 좋고 각도 2에서도 작동합니다.
$("#modal .close").click()
이 참조를 볼 수 있지만 이 링크가 제거된 경우 다음 설명을 읽으십시오.
ID가 myModal인 모달을 JavaScript 한 줄로 호출합니다.
$('#myModal').modal(options)
옵션들
데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다.데이터 속성의 경우 data-interval=interval에서와 같이 데이터에 옵션 이름을 추가합니다.
|-----------|-------------|--------|---------------------------------------------|
| 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 메서드는 비동기식이며 전환을 시작합니다.전환이 시작되자마자 전환이 종료되기 전에 호출자에게 돌아갑니다.또한 전환 구성 요소에 대한 메서드 호출은 무시됩니다.
.vmdk(계속)
콘텐츠를 모달로 활성화합니다.선택적 옵션 개체를 허용합니다.
$('#myModal').modal({
keyboard: false
})
.고맙습니다')
수동으로 모달을 전환합니다.모달이 실제로 표시되거나 숨겨지기 전에(즉, shown.bs .modal 또는 hidden.bs .modal 이벤트가 발생하기 전에) 호출자에게 반환됩니다.
$('#myModal').modal('toggle')
.modal('쇼')
수동으로 모달을 엽니다.모달이 실제로 표시되기 전에(즉, shown.bs .modal 이벤트가 발생하기 전에) 호출자에게 반환됩니다.
$('#myModal').modal('show')
.숨기기')
수동으로 모달을 숨깁니다.모달이 실제로 숨겨지기 전(즉, hidden.bs .modal 이벤트가 발생하기 전)에 호출자에게 반환됩니다.
$('#myModal').modal('hide')
.modal('handleUpdate')
열린 상태에서 모달의 높이가 변경되는 경우(즉, 스크롤 막대가 나타나는 경우) 수동으로 모달의 위치를 재조정합니다.
$('#myModal').modal('handleUpdate')
.고맙습니다')
요소의 모달을 파괴합니다.
이벤트
부트스트랩의 모달 클래스는 모달 기능으로 후크하기 위한 몇 가지 이벤트를 표시합니다.모든 모달 이벤트는 모달 자체(예: **)에서 발생합니다.유형 설명
|----------------|--------------------------------------------------------------|
| 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...
})
이것에 대해 제 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');
한 페이지에서 여러 모달 팝업을 사용하는 경우 위의 코드를 사용하여 모달 배경을 숨깁니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
$(function () {
$('#modal').modal('toggle');
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html> 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);
}
}
});
};
나는 이 트릭으로 모달 프로그래밍을 마쳤습니다.
▁▁in▁modal로 모달의 버튼을 합니다.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();
테스트 모달을 에 잠시 .$(.modal).modal('hide')을 한 후$(.modal).modal('show')제 경우에는 적어도 500밀리초의 간격이 필요합니다.
이것이 저의 테스트 사례이자 솔루션입니다.
$('.modal-loading').modal('show');
setTimeout(function() {
$('.modal-loading').modal('hide');
}, 500);
사용할 수 있습니다.
$('#' + $('.modal.show').attr('id')).modal('hide');
모달을 사용합니다.숨기면 모달만 숨겨집니다.모달 아래에 오버레이를 사용하는 경우에도 오버레이는 계속 존재합니다.클릭 호출을 사용하여 실제로 모달을 닫고 오버레이를 제거합니다.
$("#modalID .close").click()
또 다른 방법은 먼저 클래스 modal-open을 제거하여 modal을 닫는 것입니다.그런 다음 모달의 회색 표지를 제거하는 클래스 모달-백드롭을 제거합니다.
다음 코드를 사용할 수 있습니다.
$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
제 경우에는 버튼을 사용하여 모달을 보여주었습니다.
<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-module-to-show'인) 모달을 닫기 위해 (Angular typescript에서) 함수를 호출합니다.
closeById(modalId: string) {
$(modalId).modal('toggle');
$(modalId+ ' .close').click();
}
$(modalId)를 호출하면 됩니다.모달('숨기기') 작동하지 않고 왜 그런지 모르겠습니다.
PS.: 내 모달에서 나는 그 버튼 요소를 .close 클래스로 코딩했습니다.
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
이것은 나에게 효과가 있습니다.저는 초보자라서 JQuery와 Vanilla JavaScript를 함께 사용하는 것은 무시해주세요.
document.addEventListener("click",function(){
$(".modal").modal('hide');
});
이 코드는 모달을 닫는 데 완벽하게 작동했습니다(나는 부트스트랩 3.3을 사용하고 있습니다).
$('#myModal').removeClass('in')
제 경우, 부트스트랩 모달이 트리거된 메인 페이지가 사용 후 응답하지 않기 시작했습니다.$("#modal").modal('toggle');하지만 다음과 같은 방식으로 응답하기 시작했습니다.
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});
이것은 잘 작동합니다.
$(function () {
$('#modal').modal('toggle');
});
그러나 여러 개의 모델이 서로 겹쳐 쌓이면 효과적이지 않으므로 대신 이 기능이 작동합니다.
data-dismiss="modal"
모달로 추가하기만 하면 됩니다.
div tabindex="-1"
이것을 먹어보세요.
$('#yourmodal').click();
게다가 'x'를 클릭하면 대화 상자가 닫힙니다.예:
$(".ui-dialog-titlebar-close").click();
때때로 솔루션이 작동하지 않기 때문에 클래스에서 를 제거하고 수동으로 css display:display를 추가해야 합니다.
$("#modal").removeClass("in");
$("#modal").css("display","none");
내 대답은 위의 다른 많은 질문들처럼 엄격하게 관련되어 있지 않습니다.하지만 이러한 대화를 통해 제가 ESC 버튼을 눌렀을 때 부트스트랩 모달이 왜 반응하지 않는지 알 수 있었습니다.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
누군가에게 도움이 될 수도 있습니다.
코드를 입력하는 경우(일부 특수한 경우):
$modal.off('click')
그러면 이벤트가 차단되어 모달이 닫히지 않습니다.
이 경우 직접 처리해야 합니다.
$modal
.on('click', '[data-dismiss="modal"]', function() {
$modal.modal('hide');
});
당신은 이것으로 시도할 수 있습니다 그냥 추가하세요.
div tabindex="-1"
HTML 및 jquery에서 사용할 수 있습니다.
$('#myModal').modal('hide')
OR
$('#myModal').modal('toggle')
언급URL : https://stackoverflow.com/questions/16493280/close-bootstrap-modal
'programing' 카테고리의 다른 글
| ASP.NET 웹사이트의 Elmah 보안 (0) | 2023.07.11 |
|---|---|
| R에서 "작업영역 이미지 저장?" 프롬프트를 비활성화하는 방법은 무엇입니까? (0) | 2023.07.11 |
| Firestore null이 아닌 곳을 선택합니다. (0) | 2023.07.11 |
| 스프링 부트에 사용자 지정 변환기를 등록하는 방법은 무엇입니까? (0) | 2023.07.06 |
| git 모든 변경 사항을 취소하고 업스트림에서 끌어옵니다. (0) | 2023.07.06 |