본문 바로가기
Web Programming/Bootstrap

bootstrap / modal 사용하기

by hyeon-H 2021. 7. 28.
728x90
반응형

모달은 별도의 창을 만들어 사용자에게 내용을 전달하는 역할을 한다.
주의사항이나 재확인이 필요하거나 내용을 강조할 때 이용한다.

modal창


모달창은 화면이 즉 페이지가 이동되면 자동적으로 사라지게 된다는 것을 주의하여야 합니다.

Bootstrap의 modal을 사용하였고, 아래 링크로 자세한 사용방법과 다양한 모달을 찾아 볼 수 있다.

 

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

getbootstrap.com

작동 방식

 

모달은 버튼을 클릭하지 않고 모달 외부의 배경을 클릭해도 모달창은 닫히게 되지만,
아래의 코드는 배경화면을 클릭해도 닫히지 않는 모달창이다.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary m-5" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  모달 show
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">모달 제목</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        모달 내용
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
        <button type="button" class="btn btn-primary">확인</button>
      </div>
    </div>
  </div>
</div>

버튼을 클릭하면 아래의 모달창이 등장한다.

 

아래의 코드는 배경을 클릭해도 닫히게 되는 모달창입니다.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

모달창을 javascript에서 띄우는 방법입니다.

<script>
	function modal(){
		$("#staticBackdrop").modal("show");
	}
</script>
</head>
<body>
  <button type="button" class="btn btn-secondary" onclick="modal()">모달</button>
  
  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">모달 제목</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          모달 내용
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
          <button type="button" class="btn btn-primary">확인</button>
        </div>
      </div>
    </div>
  </div>

 

728x90
반응형
저작자표시 변경금지

'Web Programming > Bootstrap' 카테고리의 다른 글

인스타그램 로그인 페이지 반응형 레이아웃 만들기 / 부트스트랩(bootstrap) 사용하기  (0) 2021.11.08
bootstrap / 그리드(grid)  (0) 2021.07.28
Bootstrap / 테이블 <td> 요소 숨기기  (0) 2021.07.28

관련글

티스토리툴바