HTML 5 태그: 모달을 만드는 가장 쉬운 방법입니다.
HTML5 대화 태그는 모달을 만드는 가장 쉬운 방법입니다. 페이지에 태그를 추가하기만 하면 완료됩니다. 그런 다음 CSS로 대화 상자의 스타일을 지정하고 JavaScript로 동작을 추가할 수 있습니다.
HTML의 대화 태그는 무엇입니까?
HTML의 dialog 태그는 웹 페이지에 팝업 대화 상자를 만드는 데 사용됩니다.
dialog 태그는 대화 상자 또는 창을 정의합니다. 이 요소는 경고 메시지, 확인 메시지 또는 사용자가 응답해야 하는 모든 항목을 표시하는 데 사용할 수 있습니다.
몇 가지 간단한 예를 살펴보겠습니다.
<!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">
<meta name="author" content="Francisco Inoque">
<title>The easiest way to do modal.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn-open" id="btn-open">Open modal</button>
<dialog id="modal">
<h1>Dialog Tag</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatibus accusantium enim provident distinctio fugiat, ex cumque pariatur consequatur repellat, aliquid voluptatem possimus. Inventore a quia consequatur fuga maxime exercitationem.
</p>
<button id="btn-close" class="btn-close">Close modal</button>
</dialog>
<script src="./main.js"></script>
</body>
</html>
main.js에서 다음 코드를 작성합니다.
const btnOpen = document.querySelector("#btn-open");
const btnClose = document.querySelector("#btn-close")
const modal = document.querySelector("#modal");
btnOpen.onclick = () => {
modal.showModal()
}
btnClose.onclick = () => {
modal.close()
}
style.css에서 다음 코드를 작성합니다.
dialog::backdrop {
background-color: rgba(0 0 0 / .3);
}
dialog {
width: 20%;
border: none;
border-radius: 14px;
box-shadow: 0 0 0 .6em rgb( 0 0 0 / .3)
}
.btn-open {
position:absolute;
margin: 25% auto 0;
left:45%;
background-color: #8e2ddd;
color: #fff;
border: none;
border-radius: 14px;
padding: 1.5em;
font-size: 18px;
font-weight: bold;
cursor: pointer
}
.btn-close {
background-color: #ff0099;
color: #fff;
border: none;
border-radius: 10px;
padding: .8em;
font-size: 13px;
font-weight: bold;
cursor: pointer
}
여러분, 오늘은 여기까지입니다. 좋아요, 댓글, 팔로우 부탁드립니다.
Reference
이 문제에 관하여(HTML 5 태그: 모달을 만드는 가장 쉬운 방법입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frantchessico/the-html-5-tag-the-easiest-way-to-do-modal-8na텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
