JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<a href="#" id="termsLink">약관 내용</a>

<div id="termsPopup" class="popup">
    <div class="popup-content">
        <span class="close">&times;</span>
        <h2>이용 조건</h2>
        <p>
            <!-- Place your terms and conditions text here -->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec varius velit, non vestibulum libero. Sed ac diam venenatis, pulvinar purus a, vestibulum massa. Nulla facilisi. Sed tincidunt vel arcu non auctor. Sed sollicitudin efficitur nisi, a tempus nisi fermentum in. Nam non ex id risus elementum convallis non non felis. Fusce mollis sem sed sem gravida, ac facilisis arcu efficitur. Integer pulvinar risus a metus cursus, vel condimentum erat lacinia.
        </p>
    </div>
</div>

CSS

/* Required CSS */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: relative;
    margin: 10% auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #aaa;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

JavaScript

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const termsLink = document.getElementById('termsLink');
    const termsPopup = document.getElementById('termsPopup');
    const closeBtn = document.querySelector('.close');

    termsLink.addEventListener('click', (event) => {
        event.preventDefault();
        termsPopup.style.display = 'block';
    });

    closeBtn.addEventListener('click', () => {
        termsPopup.style.display = 'none';
    });

    window.addEventListener('click', (event) => {
        if (event.target === termsPopup) {
            termsPopup.style.display = 'none';
        }
    });
});