부트스트랩 (17) 모달 팝업 (modal)

Frameworks/Bootstrap 2020. 2. 12. 15:28

728x90

부트스트랩 웹사이트 바로가기

Modal

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

getbootstrap.com

Bootstrap의 모달 컴포넌트를 시작하기 전에...

* 메뉴 옵션이 최근 변경됨 *

모달은 HTML, CSS 및 JavaScript로 빌드됩니다. 그것들은 문서의 다른 모든 것 위에 <body>위치하고 모달 내용이 대신 스크롤되도록 스크롤을 제거 합니다.
모달“배경”을 클릭하면 모달이 자동으로 닫힙니다. (안닫히는 버전도 있음)
부트 스트랩은 한 번에 하나의 모달 창만 지원합니다. 중첩 된 모달은 사용자 경험이 좋지 않다고 믿기 때문에 지원되지 않습니다.
모달은을 사용하는데 position: fixed, 렌더링에 약간 특별한 경우가 있습니다. 가능하면 모달 HTML을 최상위 위치에 두어 다른 요소의 잠재적 인 간섭을 피하십시오. .modal다른 고정 요소 내에 중첩하면 문제가 발생할 수 있습니다.
다시 한 번으로 인해 position: fixed휴대 기기에서 모달을 사용할 때주의해야 할 사항이 있습니다. 자세한 내용은 브라우저 지원 문서 를 참조하십시오.
때문에 방법은 HTML5를 정의의 의미로, HTML 속성은 부트 스트랩 조동사에 영향을주지 않습니다. 동일한 효과를 얻으려면 몇 가지 사용자 정의 JavaScript를 사용하십시오.autofocus

https://m.blog.naver.com/PostView.nhn?blogId=hcege&logNo=220850816503&proxyReferer=https%3A%2F%2Fwww.google.com%2F

JavaScript를 작성하지 않고 모달을 활성화

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript로 모달을 활성화

$('#myModal').modal(options)

창 외부를 클릭하면 자동으로 닫히는 모달

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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>

닫기 버튼을 클릭하면 닫히는 모달

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">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">Understood</button>
      </div>
    </div>
  </div>
</div>

모달 팝업창 크기

작은	.modal-sm	300px
기본	없음	500px
큰	.modal-lg	800px
특대	.modal-xl	1140px

모달 팝업창 위에 다른 모달 팝업 띄우기

div를 사용할 경우 z-index 값을 다르게 한 modal 인스턴스를 하나 더 선언, 호출해서 사용하면 됩니다.
꼭 아래 배경이 유지되어야 할 필요성이 없을 때는 기존 모달 팝업을 닫히게 한 후 같은 위치에 띄우고, 새로운 모달 팝업 창을 닫았을 때 다시 기존 팝업창을 부활시켜도 되겠습니다.

1번 : z-indx 값이 1060 최상단 위치

2번 : z-indx 값이 1050 중간 위치

3번 : z-indx 값이 1041 마지막 위치

툴팁이란?

Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

getbootstrap.com

728x90

저작자표시 비영리 변경금지

'Frameworks > Bootstrap' 카테고리의 다른 글

[bootstrap] 부트스트랩 모달 팝업 마우스 드래그로 위치 이동하기 (0)	2020.06.11
부트스트랩 tooltip, popover 를 사용할 때 '예외가 발생했지만 catch할 수 없습니다.' 에러 (0)	2020.03.10
부트스트랩 (16) chart.js 로 차트 그리기 (1)	2019.07.17
부트스트랩 (15) 구글폰트를 이용한 예제 (0)	2019.07.10
부트스트랩 (14) Carousel 슬라이드쇼 (0)	2019.07.10

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.