본문 바로가기

모바일 웹 애플리케이션에서 confirm() 및 alert() 창 대신 간단한 커스텀 모달 창

반응형

JavaScript를 사용하여 모바일 환경에 맞는 커스텀 모달 대화 상자를 구현하는 예제입니다.

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Modal Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="showModalBtn">모달 열기</button>

    <div id="customModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModalBtn">&times;</span>
            <p>이것은 커스텀 모달 대화 상자입니다.</p>
            <button id="closeModal">닫기</button>
        </div>
    </div>

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

CSS (styles.css): 

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

JavaScript (script.js): 

const showModalBtn = document.getElementById('showModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const customModal = document.getElementById('customModal');
const closeModal = document.getElementById('closeModal');

showModalBtn.addEventListener('click', () => {
    customModal.style.display = 'block';
});

closeModalBtn.addEventListener('click', () => {
    customModal.style.display = 'none';
});

closeModal.addEventListener('click', () => {
    customModal.style.display = 'none';
});

// 화면의 다른 부분을 클릭하면 모달 닫기
window.addEventListener('click', (e) => {
    if (e.target === customModal) {
        customModal.style.display = 'none';
    }
});
Custom Modal Example

이 예제는 간단한 HTML, CSS 및 JavaScript를 사용하여 모바일 환경에 맞는 커스텀 모달 대화 상자를 만드는 방법을 보여줍니다. 모달을 열고 닫는 버튼 및 화면의 다른 부분을 클릭하면 모달이 닫히도록 구현되어 있습니다. 이 코드를 참고하여 모바일 웹 애플리케이션에서 사용할 수 있는 커스텀 모달을 만들 수 있습니다.

 

모달이 자동으로 열리고 확인 버튼을 클릭하면 특정 페이지로 이동

HTML (동일한 구조를 사용할 수 있습니다):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-open Modal Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div id="customModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModalBtn">&times;</span>
            <p>이것은 커스텀 모달 대화 상자입니다.</p>
            <button id="closeModal">닫기</button>
        </div>
    </div>

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

JavaScript (script.js): 

const customModal = document.getElementById('customModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const closeModal = document.getElementById('closeModal');

// 모달을 자동으로 열기
function openModal() {
    customModal.style.display = 'block';
}

// 확인 버튼 클릭 시 특정 페이지로 이동
function redirectToPage() {
    // 이동할 페이지의 URL을 여기에 설정합니다.
    const targetPageURL = 'https://example.com'; // 원하는 페이지 URL로 변경하세요.
    window.location.href = targetPageURL;
}

// 모달을 자동으로 열기
setTimeout(openModal, 2000); // 2초 후 모달을 엽니다.

closeModalBtn.addEventListener('click', () => {
    customModal.style.display = 'none';
});

closeModal.addEventListener('click', () => {
    customModal.style.display = 'none';
});

// 확인 버튼 클릭 시 특정 페이지로 이동
document.getElementById('closeModal').addEventListener('click', redirectToPage);

// 화면의 다른 부분을 클릭하면 모달 닫기
window.addEventListener('click', (e) => {
    if (e.target === customModal) {
        customModal.style.display = 'none';
    }
});

이 예제에서는 setTimeout 함수를 사용하여 모달을 자동으로 2초 후에 엽니다. 확인 버튼을 클릭하면 redirectToPage 함수가 호출되고, 해당 함수에서는 특정 페이지로 리디렉션됩니다. 필요에 따라 리디렉션할 페이지의 URL을 수정하세요.

 

아래의 코드는 주어진 HTML 링크를 클릭할 때 모달 대화 상자를 표시하고, 확인을 클릭하면 특정 페이지로 이동합니다. 이 코드는 JavaScript와 CSS를 사용하여 모달 창을 구현합니다.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모달 대화 상자 대체 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- 여러 개의 링크를 대상으로 하는 클래스를 추가합니다. -->
    <a href="#" class="openModalLink">링크 1</a>
    <a href="#" class="openModalLink">링크 2</a>
    <a href="#" class="openModalLink">링크 3</a>

    <div id="customModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModalBtn">&times;</span>
            <p>로그인 후 이용할 수 있습니다.</p>
            <button id="confirmModal">확인</button>
        </div>
    </div>

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

JavaScript (script.js): 

const openModalLinks = document.querySelectorAll('.openModalLink');
const customModal = document.getElementById('customModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const confirmModalBtn = document.getElementById('confirmModal');

// 모달을 열기
function openModal() {
    customModal.style.display = 'block';
}

// 모달을 닫기
function closeModal() {
    customModal.style.display = 'none';
}

// 각 링크에 대한 이벤트 리스너를 추가합니다.
openModalLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault(); // 링크의 기본 동작을 중지합니다.
        openModal();
        confirmModalBtn.addEventListener('click', () => {
            closeModal();
            redirectToPage();
        });
    });
});

closeModalBtn.addEventListener('click', closeModal);

// 확인 버튼 클릭 시 특정 페이지로 이동
function redirectToPage() {
    const targetPageURL = '이동할 페이지 URL'; // 이동할 페이지 URL을 설정합니다.
    window.location.href = targetPageURL;
}

// 화면의 다른 부분을 클릭하면 모달 닫기
window.addEventListener('click', (e) => {
    if (e.target === customModal) {
        closeModal();
    }
});

위 코드에서는 여러 개의 링크에 대한 클래스 "openModalLink"를 사용하여 각 링크를 선택하고 처리합니다. 클릭 이벤트 리스너를 통해 모달을 열고 확인 버튼을 클릭하면 해당 카테고리에 대한 페이지로 이동합니다.

반응형
저작자표시

'SMART GPT' 카테고리의 다른 글

동영상의 실제 크기를 비디오 엘리먼트의 width와 height에 적용  (0) 2023.12.18
이미지, 동영상, 텍스트 가로 세로 사이즈 구하기  (0) 2023.12.16
JavaScript 원하는 자릿수의 랜덤 숫자를 생성하는 함수  (0) 2023.10.13
mix-blend-mode 블렌딩 모드를 설정하는 속성  (0) 2023.10.06
div 요소의 가로폭을 텍스트 내용의 길이에 따라 추출  (0) 2023.10.01
pre 태그의 세로 길이를 JavaScript를 사용하여 동적으로 감지  (0) 2023.10.01
모바일 화면 회전 감지와 새로고침을 구현하는 방법  (0) 2023.09.30
PHP URL 에 자동 링크 걸기  (0) 2023.09.29

관련글

댓글

Copyright ⓒ SmartWeb All rights reserved.

티스토리툴바