부트스트랩의 모달 상자는 어디에 있나요?-프런트엔드 Q&A-php.cn

부트스트랩의 모달 상자는 어디에 있나요?

WBOY

풀어 주다： 2022-08-01 17:55:40

원래의

1736명이 탐색했습니다.

Bootstrap의 모달 상자는 상위 양식에 오버레이되며 하위 양식입니다. 모달 상자의 목적은 별도 소스의 콘텐츠를 표시하고 상위 양식을 떠나지 않고도 일부 상호 작용을 허용하는 것입니다. ".modal-sm" 클래스를 추가하여 작은 모달 상자를 만들고, ".modal-lg" 클래스를 추가하여 큰 모달 상자를 만들 수 있습니다.

부트스트랩의 모달 상자는 어디에 있나요?

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩의 모달 상자는 무엇입니까?

모달 상자(Modal)는 상위 항목에 겹쳐져 있습니다. 양식 하위 양식. 일반적으로 목적은 상위 양식을 떠나지 않고도 상호 작용이 가능한 별도 소스의 콘텐츠를 표시하는 것입니다. 하위 양식은 정보 상호 작용 등을 제공할 수 있습니다.

모달 상자를 만드는 방법

다음 예에서는 간단한 모달 상자 효과를 만듭니다.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>
</body>
</html>

로그인 후 복사

출력 결과:

부트스트랩의 모달 상자는 어디에 있나요?

모달 상자 크기

를 추가하여 .modal-sm을 추가할 수 있습니다. modal-sm 클래스는 작은 모달 상자를 만들고, .modal-lg 클래스는 큰 모달 상자를 만듭니다.

size 클래스는

요소의 .modal-dialog 클래스 뒤에 배치됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>
</body>
</html>

로그인 후 복사

출력 결과:

부트스트랩의 모달 상자는 어디에 있나요?