[Bootstrap 기초] 4. Modal / Offcanvas

Modal

 

 

 

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>

 

 

How to open Modal 

<!-- 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" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <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>

 

fade

<div class="modal fade">
  
</div>

 

 

 

data-bs-target="#infoModal"  data-bs-keyboard="false"

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

<!-- Modal -->
<div class="modal fade" id="infoModal" 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">
        <h1 class="modal-title fs-5" id="infoModalLabel">Modal title</h1>
        <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">Understood</button>
      </div>
    </div>
  </div>
</div>

 

How To Use Scrollbar

 

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

 

Vertically Centered

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

 

 

How to Change Size

 

<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-md">...</div>
<div class="modal-dialog modal-sm">...</div>

 

full-size modal

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

 

 

How to Open by JS

    <script>
        const myModal = new bootstrap.Modal('#myModal');
        myModal.show();
    </script>

 

How to Open by JS Event

 

    <script>
        const myModal = new bootstrap.Modal('#myModal');
        
        function openModal() {
            myModal.show();
        }

        function closeModal(){
            myModal.hide();
        }
    </script>

    <button class="btn btn-primary" onclick="openModal()">Open</button>

 

Event Listener

 

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
    // do something...
    alert("hidden");
})

 

 

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
    // do something...
    alert("hidden.bs.modal");
})
myModalEl.addEventListener('hide.bs.modal', event => {
    // do something...
    alert("hide.bs.modal");
})
myModalEl.addEventListener('show.bs.modal', event => {
    // do something...
    alert("show.bs.modal");
})
myModalEl.addEventListener('shown.bs.modal', event => {
    // do something...
    alert("shown.bs.modal");
})

 

 

 

 

자바스크립트로 버튼을 클릭하면 해당 기업번호를 얻어서 

서버에서 해당 자료를 받아 화면에 내용을 작성합니다.

 

 

OffCanvas

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

 

 

바탕이 클릭되지 않게

data-bs-backdrop="static"

 

검정색

class=".... text-bg-dark"

 

 

Place

class=".. offcanvas-start"

.offcanvas-start
.offcanvas-end
.offcanvas-top
.offcanvas-bottom

 

 

text-truncate : 레이아웃에 맞게 문자열 자르기

<div class="row">
  <div class="col-2 text-truncate">
    This text is quite long, and will be truncated once displayed.
  </div>
</div>

 

 

Opacity : 투명도

 

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
<div class="opacity-0">...</div>

 

 

 

 

 

 

오늘 설명한 것은 필수적으로 알아두어야 할 이벤트나 옵션만을 설명했습니다.

부트스트랩 웹사이트에서 다른 옵션들을 살펴보시기 바랍니다.

 

 

과제

1. 상품 사진을 클릭하면 모달이 뜨고, 모달에 사진이 크게 나오는 페이지를 만들어보세요.

 

시니어

2. 자바스크립트를 이용하여 모달의 제목부분을 상품이름으로 사진 아래쪽에는 카테고리와 금액을 표시하도록 

 

 

 

 실습을 하면서 강의를 진행하겠습니다.