APSWM

내 notice에 있는 이스터에그 코드
https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/#google_vignette
Create Popup Modal Box in HTML CSS & JavaScript
Hey buddy, I hope you are doing and creating mindblowing content. Today I have brought a beautiful and valuable project for you. Today you will learn to
www.codingnepalweb.com
해당 article을 참고하여 내 의도에 맞게끔 수정해씀
냥캣을 누르면 적용된 모습을 확인할 수 있다!
See the Pen Untitled by 123 (@123-the-scripter) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Popup Modal Box</title>
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
    <!-- Embedded CSS -->
    <style>
        /* Google Fonts - Poppins */
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

        /* Reset and namespace */
        .custom-popup * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
            font-size: 10pt;
        }

        /* Modal Section */
        .custom-popup {
            position: fixed;
            height: 1%;
            width: 1%;
            z-index: 9999; /* Ensure it is above other elements */
        }
        .custom-popup .custom-button {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            background: url('https://upload.wikimedia.org/wikipedia/ko/e/ed/Nyan_cat_250px_frame.PNG') no-repeat center center;
            background-size: cover;
            cursor: pointer;
        }
        .custom-popup .custom-button:hover {
            opacity: 0.8;
        }
        .custom-popup .custom-show-modal {
            position: fixed;
            transform: translate(-50%, -50%);
        }
        .custom-popup .custom-modal-box {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .custom-popup.active .custom-button.custom-show-modal {
            display: none;
        }
        .custom-popup .custom-overlay {
            position: fixed;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            pointer-events: none;
        }
        .custom-popup.active .custom-overlay {
            opacity: 1;
            pointer-events: auto;
            display : none;
        }
        .custom-popup .custom-modal-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 380px;
            width: 100%;
            padding: 30px 20px;
            border-radius: 24px;
            background-color: #fff;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            transform: translate(-50%, -50%) scale(1.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Modal box shadow */
        }
        .custom-popup.active .custom-modal-box {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }
        .custom-popup .custom-modal-box .custom-icon {
            width: 70px;
            height: 70px;
        }
        .custom-popup .custom-modal-box .custom-heading {
            margin-top: 20px;
            font-size: 25px;
            font-weight: 500;
            color: #333;
        }
        .custom-popup .custom-modal-box .custom-subheading {
            font-size: 16px;
            font-weight: 400;
            color: #333;
            text-align: center;
        }
        .custom-popup .custom-modal-box .custom-buttons {
            margin-top: 25px;
        }
        .custom-popup .custom-modal-box .custom-button-normal {
            font-size: 14px;
            padding: 10px 20px;
            background-color: #4070f4;
            color: #fff;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            margin: 5px;
      	    display: inline-block; /* 버튼 크기 균일하게 */
        }
        .custom-popup .custom-modal-box .custom-button-normal:hover {
            background-color: #265df2;
        }
        .article-content p>a:not(.btn-toggle-moreless)::before, .notice-content a:not(.btn-toggle-moreless)::before{
            width:0px
        }

    </style>
</head>
<body>
    <div class="custom-popup">
        <button class="custom-button custom-show-modal"></button> <!-- Image only as button -->
        <span class="custom-overlay"></span>
        <div class="custom-modal-box">
            <img src="https://upload.wikimedia.org/wikipedia/ko/e/ed/Nyan_cat_250px_frame.PNG" alt="Icon" class="custom-icon" />
            <h2 class="custom-heading">제목</h2>
            <h3 class="custom-subheading"> 내용 </h3>
            <div class="custom-buttons">
                <button class="custom-button-normal custom-close-btn">선택지 1</button>
                <button class="custom-button-normal">선택지 2</button>
            </div>
        </div>
    </div>
    <!-- JavaScript -->
    <script>
        const customPopup = document.querySelector(".custom-popup"),
            customOverlay = customPopup.querySelector(".custom-overlay"),
            showBtn = customPopup.querySelector(".custom-button.custom-show-modal"),
            closeBtn = customPopup.querySelector(".custom-button-normal.custom-close-btn");

        // Set random position for the button
        showBtn.style.position = "fixed";
        showBtn.style.top = `${Math.random() * 80 + 10}%`;  // 10% ~ 90% 사이의 랜덤 값
        showBtn.style.right = `${Math.random() * 80 + 10}%`; // 10% ~ 90% 사이의 랜덤 값

        showBtn.addEventListener("click", () => customPopup.classList.add("active"));

        customOverlay.addEventListener("click", () =>
            customPopup.classList.remove("active")
        );

        closeBtn.addEventListener("click", () =>
            customPopup.classList.remove("active")
        );
    </script>
</body>
</html>
이스터에그 팝업 코드

티스토리툴바
