HTML, CSS 및 JavaScript를 사용하여 모달 팝업 상자를 만드는 방법

19490 단어 htmlwebdevcssjavascript
모달 팝업은 웹에서 매우 인기가 있습니다. 일부 일반적인 용도에는 뉴스레터 가입, 경고, 로그인 양식 등이 포함될 수 있습니다.

이 짧은 기사에서는 기본 모달 팝업 상자를 작성하는 방법에 대해 설명합니다.

모달 팝업 상자는 무엇입니까?



모달 팝업 상자는 사용자가 웹 페이지를 탐색하는 동안 나타나는 팝업 창이며 일반적으로 중요한 정보를 표시하거나 방문자에게 특정 작업을 수행하도록 프롬프트하기 위한 것입니다.

모달 상자의 고유한 기능 중 하나는 웹 페이지의 주요 콘텐츠를 계속 표시하면서 비활성화한다는 것입니다.

HTML, CSS 및 JavaScript를 사용하여 모달 팝업 상자 만들기



모달 팝업 상자의 폴더 구조는 매우 간단합니다. modal-box라는 폴더를 만드는 것으로 시작합니다. 이 폴더 안에 index.html , styles.css 및 app.js 의 세 파일을 만듭니다. 그런 다음 아래 그림과 같이 다른 모든 파일을 index.html에 연결합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modal Box</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <script src="app.js" type="text/javascript"></script>
</body>
</html>


모달 팝업 상자의 HTML 마크업



이제 모달에 대한 HTML 마크업을 설정하겠습니다. 다음 코드를 index.html 파일에 복사하거나 codepen 에서 이 프로젝트의 모든 코드를 가져올 수 있습니다.

<div class="modal" id="modal">
    <div class='modal__container'>
        <img class="modal__img" src="https://drive.google.com/uc?export=view&id=1hsqRgrdpr5T673KZLyUmHVoLWcv159MC">
        <div class="modal__content">
            <h1 class="modal__title">SPONSOR MY EDUCATION <span>START-UP CONTEST</span>
                <h1>
                    <p class="modal__paragraph">This contest is geared towards discovering and funding innovative ideas.</p>
                    <button class="modal__button">Click here to participate</button>
        </div>
        <i id="close" class="fas fa-times"></i>
    </div>
</div>
<h1 class="main__title">This is a heading</h1>
<p class="main__paragraph">This is a paragraph</p>


Because we're utilizing a Font Awesome icon in our code, you'll need to provide a link to it when copying the code above.



CSS가 없으면 우리 페이지는 다음과 같이 맨손으로 보일 것입니다.

CSS로 모달 팝업 상자 스타일링



우리는 우리의 모달 상자가 아주 멋지게 보이기를 원하므로 이제 몇 가지 CSS 코드를 가져오겠습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: montserrat;
    background-color: #0a9396;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

.main__title {
    font-size: 4rem
}

.main__paragraph {
    font-size: 1.8rem
}

.modal__img {
    max-width: 60%;
    height: auto;
    display: block;
}

.modal {
    max-width: 700px;
    width: 85%;
    position: fixed;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #EE9B00;
}


/****show modal class****/

.modal.show {
    display: block
}

#close {
    cursor: pointer;
    color: white;
    position: absolute;
    top: 0;
    font-size: 25px;
    right: 0;
    padding: 1rem;
    margin-right: 10px;
}

.modal__title {
    font-size: 2.5rem;
}

.modal__title span {
    display: block;
    font-weight: 400;
}

.modal__paragraph {
    font-size: 16px;
    font-weight: 400;
}

.modal__button {
    background-color: #0a9396;
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 5px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    transition: 0.3s background-color ease-in-out;
}

.modal__button:hover {
    background-color: #0a9372;
}

main {
    text-align: center;
}

.modal__container {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


/****styling modal on smaller screen******/

@media only screen and (min-width: 768px) {
    .modal__container {
        flex-direction: row;
        padding: 2rem;
        text-align: left;
    }
    .modal__img {
        max-width: 50%
    }
}

@media only screen and (max-width: 500px) {
    .modal__title {
        font-size: 2rem;
    }
    .modal__img {
        max-width: 80%
    }
}


위의 스타일을 모두 적용하면 이제 모달 상자가 다음과 같이 표시됩니다.



이제 모달 팝업 창을 숨기고 방문자가 사이트에 도착한 후 몇 초 후에 표시합니다. app.js 파일에 일부 JavaScript 코드를 추가하여 이 기능을 구현합니다.

JavaScript 코드를 추가하기 전에 display 속성을 none 로 설정하여 모달 상자를 숨기겠습니다. 이것은 CSS 코드에서 .modal 클래스에 대해 이미 정의된 스타일에 추가되어야 합니다.

.modal {
  display: none;
}


이제 모달 상자가 없는 웹 사이트 페이지는 다음과 같습니다.



자바스크립트 추가



이제 JavaScript 코드를 추가해 보겠습니다.

const closeBtn = document.getElementById('close');
const modalMenu = document.getElementById('modal');
const modalBtn = document.querySelector('.modal__button');

setTimeout(() => {
    modalMenu.classList.add('show');
}, 3000);

closeBtn.addEventListener('click', () => { modalMenu.classList.remove('show') })
modalBtn.addEventListener('click', () => { modalMenu.classList.remove('show') })


자바스크립트 사용
  • 모달 상자, 닫기 버튼 및 모달의 버튼에 액세스했습니다.
  • 다음으로 setTimeout() 메소드를 사용하여 방문자가 사이트에 도착한 후 3초 후에 모달 상자를 표시했습니다.
  • 마지막으로 방문자가 닫기 버튼이나 모달 버튼을 클릭할 때 보기에서 모달 상자를 숨기는 이벤트 리스너를 추가했습니다.

    • 이제 이것이 우리 프로젝트가 결국 어떻게 보이고 작동하는지입니다.



    마무리



    이 자습서에서는 HTML, CSS 및 JavaScript를 사용하여 모달 팝업 상자를 만드는 방법을 배웠습니다.

    따라와 주셔서 감사합니다. 이 짧은 튜토리얼에서 유용한 정보를 얻었기를 바랍니다. 댓글을 남겨주시고 이 글이 마음에 드셨다면 저를 팔로우 해주세요.
    VITE : Terraform 및 CircleCI가 포함된 S3 웹 사이트
    macOS를 catalina로 업데이트했을 때의 개인적인 버그 정리(10월 14일 시점)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage