반응형
Modal 사용하는 방법
popup과 비슷한 기능
https://getbootstrap.com/docs/5.0/components/modal/
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
구현 방법
버튼을 만들어 주고 data-bs-toggle="modal" 을 선언해주면 modal 창을 띄워주고 기능을 하고
data-bs-target="#exampleModal" 띄워줄 모달창의 id값을 입력해주면 입력한 id값을 가지는 모달창을 띄워준다.
모달 구조
모달의 이벤트 처리 - Via JavaScript 클릭
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
모달 예제
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script defer src = "./main.js"></script>
<title>Document</title>
</head>
<body>
<!-- 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">
<!-- 로그인 양식 추가 -->
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
모달 이벤트 처리를 진행할 JS 파일
// 모달창 띄워줄때 자동으로 email 입력창에 포커스 되도록 설정
// 포커스 처리할 id값 입력
const emailInputEl = document.querySelector('#exampleInputEmail1');
// 모달 id값 입력
const modalEl = document.querySelector('#exampleModal');
// 모달이 보여줄 때 이벤트 처리
modalEl.addEventListener('shown.bs.modal', function () {
// 이메일 입력란이 포커스 된다.
emailInputEl.focus();
});
반응형
'프론트엔드 > Bootstrap' 카테고리의 다른 글
| 부트 스트랩 - npm 프로젝트 (0) | 2021.06.30 |
|---|---|
| 부트 스트랩 - Components 사용 방법 (Tooltips) (0) | 2021.06.29 |
| 부트 스트랩 - Forms 사용 방법 (0) | 2021.06.28 |
| 부트 스트랩 - Components 사용 방법 (Dropdowns, List group) (0) | 2021.06.28 |
| 부트 스트랩 - Components 사용 방법 (Button) (0) | 2021.06.28 |
