자바스크립트 모달 닫기

JavaScript Modal Close

Modal은 일반적으로 콘텐츠 표시, 확인 요청 또는 정보 수집에 사용되는 일반적인 웹 페이지 팝업 창입니다. JavaScript에서 모달을 생성하는 것은 일반적인 작업이지만 모달을 닫는 것은 그리 쉽지 않을 수 있습니다. 이 기사에서는 JavaScript 모달 닫기를 달성하는 몇 가지 일반적인 방법을 소개합니다.

1. JQuery 사용

jQuery를 사용하는 경우 다음과 같은 방법으로 모달을 닫을 수 있습니다.

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

모달을 표시하려면 modal("show")를 사용하고, 를 사용하세요. modal("hide") 모달을 닫습니다. 그 중 #myModal은 모달 선택기이며 실제 상황에 따라 변경해야 합니다. modal("show") 来显示 modal，使用 modal("hide") 来关闭 modal。其中，#myModal 是你 modal 的选择器，需要根据你的实际情况进行更改。

2. 使用 Bootstrap 的方法

如果你使用了 Bootstrap ，可以使用以下的方式来关闭 modal：

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

和 jQuery 方法类似，使用 modal("show") 来显示 modal，使用 modal("hide") 来关闭 modal。同样，#myModal 是你 modal 的选择器，需要根据你的实际情况进行更改。

3. 使用原生 JavaScript 的方法

如果你不想使用 jQuery 或者 Bootstrap ，可以使用原生 JavaScript 来关闭 modal。这种方法需要用到 getElementById 方法来获取 modal 元素，使用 style.display 来设置其 display 属性为 none。

以下是一个示例代码：

// 显示 modal
document.getElementById("myModal").style.display = "block";

// 关闭 modal
document.getElementById("myModal").style.display = "none";

使用 style.display = "block" 来显示 modal，使用 style.display = "none" 来关闭 modal。同样，myModal 是你 modal 的 id，需要根据你的实际情况进行更改。

4. 在 modal 中添加关闭按钮

在 modal 中添加关闭按钮可以提供更好的用户体验，同时也可以方便用户关闭 modal，下面是一个示例代码：

<!-- 在 modal 中添加关闭按钮 -->
<div class="modal-header">
  <h5 class="modal-title">Modal 标题</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

可以看到，在 modal 的头部中添加了一个关闭按钮，其中 data-dismiss="modal" 属性是必须的，它指示按钮要关闭 modal。用户单击关闭按钮会触发 hide.bs.modal 事件，可以通过以下方式来捕获该事件：

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

关闭 modal 可以使用 modal("hide") 或 style.display = "none"

부트스트랩 방법 사용

부트스트랩을 사용하는 경우 다음 방법을 사용하여 모달을 끌 수 있습니다.

rrreee🎜jQuery 방법과 유사하게 modal("show" ) 모달을 표시하려면 modal("hide")를 사용하여 모달을 닫습니다. 마찬가지로 #myModal은 모달 선택기이며 실제 상황에 따라 변경해야 합니다. 🎜
🎜기본 JavaScript 방법 사용🎜🎜🎜jQuery 또는 Bootstrap을 사용하지 않으려면 기본 JavaScript를 사용하여 모달을 끌 수 있습니다. 이 메서드를 사용하려면 getElementById 메서드를 사용하여 모달 요소를 얻고 style.display를 사용하여 해당 display 속성을 ​​none 코드>. 🎜🎜다음은 샘플 코드입니다. 🎜rrreee🎜모달을 표시하려면 style.display = "block"을 사용하고, 모달을 닫으려면 style.display = "none"을 사용하세요. 마찬가지로 myModal은 모달의 id이며 실제 상황에 따라 변경해야 합니다. 🎜
🎜모달에 닫기 버튼 추가🎜🎜🎜모달에 닫기 버튼을 추가하면 더 나은 사용자 경험을 제공할 수 있으며 사용자가 모달을 더 쉽게 닫을 수 있습니다. : 🎜rrreee🎜 보시다시피 모달 헤드에 닫기 버튼이 추가되었습니다. 여기에는 data-dismiss="modal" 속성이 필요하며 버튼에 모달을 닫도록 지시합니다. 사용자가 닫기 버튼을 클릭하면 hide.bs.modal 이벤트가 트리거됩니다. 이 이벤트는 다음과 같은 방법으로 캡처할 수 있습니다. 🎜rrreee🎜모달을 닫으려면 를 사용할 수 있습니다. modal("hide") 또는 style.display = "none" 중에서 선택하는 것은 구현에 따라 다릅니다. 🎜🎜요약🎜🎜JQuery, Bootstrap 또는 네이티브 JavaScript를 사용하는 등 JavaScript에서 모달을 닫는 방법은 다양하며 더 나은 사용자 경험을 제공하기 위해 모달에 닫기 버튼을 추가할 수 있습니다. 어떤 방법을 사용할지는 구현 및 상황에 따라 다릅니다. 어떤 방법을 선택하든 모달이 성공적으로 닫힐 수 있는지 확인해야 합니다. 그렇지 않으면 사용자 경험에 영향을 미칠 수 있습니다. 🎜

위 내용은 자바스크립트 모달 닫기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!