부트스트랩 자바스크립트 모달 상자 닫기

웹 개발에서 모달 상자는 프롬프트 정보 표시, 양식 채우기 등에 일반적으로 사용되는 인터페이스 요소입니다. Bootstrap은 모달 상자를 포함하여 많은 편리한 구성 요소를 제공하는 널리 사용되는 프런트 엔드 프레임워크입니다. 모달 상자와 함께 사용되는 JavaScript 코드는 모달 상자의 표시, 숨기기, 닫기 및 기타 동작을 제어할 수 있습니다. 이 기사에서는 Bootstrap JavaScript 코드를 사용하여 모달 상자를 닫는 방법을 소개합니다.

모달 상자를 닫는 방법

Bootstrap은 모달 상자를 닫는 여러 가지 방법을 제공합니다.

• 모달 상자에서 닫기 버튼을 클릭합니다.
• 모달 상자 외부를 클릭합니다.
• JavaScript 메서드에서 API를 호출합니다.

여기에서는 JavaScript 코드를 통해 모달 상자를 닫는 세 번째 방법에 중점을 둡니다.

API 방식을 사용하여 모달 상자 닫기

Bootstrap 모달 상자는 열기, 닫기, 전환 등과 같은 여러 작업을 지원하는 modal 메서드를 제공합니다. 그 중 모달박스를 닫는 방법은 hide입니다. 구체적인 사용법은 다음과 같습니다. modal，它支持多种操作，如打开、关闭、切换等。在其中，关闭模态框的方法为hide，具体用法如下：

$('#myModal').modal('hide');

其中'#myModal'是模态框的id，如果你使用的是自定义样式，也可以替换成其他选择器。

例如，代码如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是一个简单的模态框结构，其中包括一个关闭按钮。下面我们就来看看如何使用JavaScript代码关闭它。

首先，我们需要获取模态框的jQuery对象：

const myModal = $('#myModal');

然后，可以把一个关闭模态框的方法封装成一个函数：

function hideModal() {
  myModal.modal('hide');
}

在需要关闭模态框的地方，只需要调用这个函数即可：

hideModal();

总结

本文介绍了Bootstrap JavaScript代码如何关闭模态框。通过modalrrreee

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