简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  부트스트랩의 모달 상자는 어디에 있나요?

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

WBOY
WBOY원래의
2022-08-01 17:55:401673검색

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>

출력 결과:

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

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩의 모달 상자는 어디에 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

bootstrap
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：html5에 여러 양식이 있을 수 있나요?다음 기사：html5에 여러 양식이 있을 수 있나요?

관련 기사

더보기