[Javascript] HTML + JS 로 간단하게 모달창 만들기

코린이_탱 2023. 5. 6. 13:56

2023. 5. 6. 13:56

이번 게시물에서는 아래 영상을 참고하여 HTML+JS로 간단하게 모달창을 만들어 본다.

Yotube-노마드코더

①. 우선 아래와 같이 버튼을 하나 만들어준다.

<!-- modal.html -->

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<button>Show modal</button>
</body>
</html>

②. 위의 HTML 코드를 브라우저에서 확인하면 아래와 같은 버튼이 나타난다.

③. 그 후, 'Show modal' 버튼을 눌렀을 때 보여줄 모달창을 만들어준다.

* 이때, model 창은 <dialog> 태그를 사용하여 만들어 준다.

<!-- modal.html -->

<!DOCTYPE html>

...(생략)...

<dialog>
    hello~
    <form method="dialog">
      <button value="close">Close</button>
      <button value="confirm">Confirm</button>
    </form>
</dialog>
</body>
</html>

위의 코드에서 사용한 dialog 태그의 정의 및 특징은 다음과 같다.

* 정의 및 특징

- <dialog> 태그는 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의할 때 사용합니다.

- <dialog> 요소는 웹 페이지에서 손쉽게 팝업 대화 상자를 만들 수 있게 해줍니다.

출처: http://www.tcpschool.com/html-tags/dialog(TCPSchool.com)

④. 'show modal' 버튼을 클릭 시 dialog 태그를 활성화 하기 위해 js 파일을 생성 하여 아래와 같이 작성한다.

/* modal.js */

const button = document.querySelector("button");
const dialog = document.querySelector("dialog");



button.addEventListener("click", () =>{
    dialog.showModal();
});

<!-- modal.html -->

...(생략)...

</body>
<script src="modal.js"></script>
</html>

⑤. 이제 다시 브라우저에서 버튼을 클릭하면 아래와 같이 모달창이 활성화 된다.

CSS 등을 이용하면 버튼 및 모달창을 사용자의 기호에 맞게 꾸밀 수 있다!

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

'Javascript' 카테고리의 다른 글

[Javascript] 내장객체 - Date (0)	2023.03.28
[Javascript] 내장 객체 - Array (0)	2023.03.27
[Javascript] 객체 (0)	2023.03.27
[javascript] 함수(function) (0)	2023.03.23
[Javascript] 반복문 연습 (0)	2023.03.23

🧑‍💻 taeyoung IT Study

[Javascript] HTML + JS 로 간단하게 모달창 만들기

'Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바