1.  설명

오늘은 평소 자주 쓰는 모달 팝업을 올려놓습니다.

은근히 이런 모달 팝업들이 종종 사용되는 경우가 많은 것 같습니다.

 

2.  HTML

<!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">
    <title>Document</title>
</head>

<body>
    <!-- 모달 팝업 작동 시키는 텍스트 -->
    <div class="modal">
        <p>View as interview text</p>
    </div>
    <!-- 모달 팝업 작동 시키는 텍스트 -->

    <!-- 팝업 및 팝업 뒷배경 -->
    <div class="popup__dim"></div>
    <div class="popup">
        <div class="popup__inner">
            <h4>Artist Interview</h4>
            <div class="popup__close">x</div>
            <div class="popup__scroll">
                <p>
                    Heart characters represents myself. I always look around and look around, feel vulnerable and
                    sometimes live scary days, but I live with positive thoughts. I once experienced depression and
                    social phobia, but all of this is overcome by the power of love. I hope that positive energy will
                    spread to the world through Happy Heart NFTs, which are looking for happiness through new challenges
                    and adventures.
                    <br><br>
                    <b>Q. Heart characters represents myself.</b><br>
                    I always look around and look around, feel vulnerable and sometimes live scary days, but I live with
                    positive thoughts. I once experienced depression and social phobia, but all of this is overcome by
                    the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs,
                    which are looking for happiness through new challenges and adventures.
                    <br><br>
                    <b>Q. Heart characters represents myself.</b><br>
                    I always look around and look around, feel vulnerable and sometimes live scary days, but I live with
                    positive thoughts. I once experienced depression and social phobia, but all of this is overcome by
                    the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs,
                    which are looking for happiness through new challenges and adventures.
                    <br><br>
                    <b>Q. Heart characters represents myself.</b><br>
                    I always look around and look around, feel vulnerable and sometimes
                </p>
            </div>
        </div>
    </div>
    <!-- 팝업 및 팝업 뒷배경 -->

</body>

</html>

3.  CSS

.popup__dim {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 1000vh;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
}

.popup__dim.modal {
    opacity: 1;
    z-index: 10;
}

.modal__popup {}

.modal>p {
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    text-decoration-line: underline;
    color: #FF8897;
    cursor: pointer;
}

.popup {
    position: fixed;
    width: 784px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.popup.open {
    z-index: 11;
    opacity: 1;
}

.popup__inner {
    background: #fff;
    padding: 80px 50px;
}

.popup__inner h4 {
    font-size: 50px;
    line-height: 50px;
    color: #DD4155;
}

.popup__scroll p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #999999;
}

.popup__scroll {
    position: relative;
    height: 276px;
    overflow-y: scroll;
}

.popup__inner {
    position: relative;
}

.popup__inner:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 42px;
    height: 84px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) -10.12%, #FFFFFF 50%);
}

.popup__scroll p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
    color: #FF8897;
    padding-bottom: 40px;
}

.popup__scroll::-webkit-scrollbar {
    width: 10px;
}

.popup__scroll::-webkit-scrollbar-thumb {
    background: #DD4155;
    border-radius: 6px;
    -webkit-width: 10px;
}

.popup__scroll::-webkit-scrollbar-track {
    background-clip: content-box;
    -webkit-box-shadow: inset 0 0 4px transparent;
    border-radius: 4px;
    background-color: #FFD4D4;
    width: 4px;
    border: 3px solid transparent;

}

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

4.  JS

const modal_popup = function () {
    $('.modal p').click(function () {
        $('.popup__dim').addClass('modal');
        $('.popup').addClass('open');
    });

    $('.popup__dim, .popup__close').click(function () {
        $('.popup__dim').removeClass('modal');
        $('.popup').removeClass('open');
    });
}

 

5.  전체

<!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">
    <title>Document</title>

    <style>
        .popup__dim {
            content: '';
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 1000vh;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            z-index: -1;
            transition: opacity 0.5s ease;
        }

        .popup__dim.modal {
            opacity: 1;
            z-index: 10;
        }

        .modal__popup {}

        .modal>p {
            font-size: 16px;
            line-height: 16px;
            text-align: center;
            text-decoration-line: underline;
            color: #FF8897;
            cursor: pointer;
        }

        .popup {
            position: fixed;
            width: 784px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .popup.open {
            z-index: 11;
            opacity: 1;
        }

        .popup__inner {
            background: #fff;
            padding: 80px 50px;
        }

        .popup__inner h4 {
            font-size: 50px;
            line-height: 50px;
            color: #DD4155;
        }

        .popup__scroll p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #999999;
        }

        .popup__scroll {
            position: relative;
            height: 276px;
            overflow-y: scroll;
        }

        .popup__inner {
            position: relative;
        }

        .popup__inner:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 42px;
            height: 84px;
            width: 100%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) -10.12%, #FFFFFF 50%);
        }

        .popup__scroll p {
            margin-top: 16px;
            font-size: 16px;
            line-height: 24px;
            color: #FF8897;
            padding-bottom: 40px;
        }

        .popup__scroll::-webkit-scrollbar {
            width: 10px;
        }

        .popup__scroll::-webkit-scrollbar-thumb {
            background: #DD4155;
            border-radius: 6px;
            -webkit-width: 10px;
        }

        .popup__scroll::-webkit-scrollbar-track {
            background-clip: content-box;
            -webkit-box-shadow: inset 0 0 4px transparent;
            border-radius: 4px;
            background-color: #FFD4D4;
            width: 4px;
            border: 3px solid transparent;

        }

        .popup__close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>


<body>
    <!-- 모달 팝업 작동 시키는 텍스트 -->
    <div class="modal">
        <p>View as interview text</p>
    </div>
    <!-- 모달 팝업 작동 시키는 텍스트 -->


    <!-- 팝업 및 팝업 뒷배경 -->
    <div class="popup__dim"></div>
    <div class="popup">
        <div class="popup__inner">
            <h4>Artist Interview</h4>
            <div class="popup__close">x</div>
            <div class="popup__scroll">
                <p>
                    Heart characters represents myself. I always look around and look around, feel vulnerable and
                    sometimes live scary days, but I live with positive thoughts. I once experienced depression and
                    social phobia, but all of this is overcome by the power of love. I hope that positive energy will
                    spread to the world through Happy Heart NFTs, which are looking for happiness through new challenges
                    and adventures.
                    <br><br>
                    <b>Q. Heart characters represents myself.</b><br>
                    I always look around and look around, feel vulnerable and sometimes live scary days, but I live with
                    positive thoughts. I once experienced depression and social phobia, but all of this is overcome by
                    the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs,
                    which are looking for happiness through new challenges and adventures.
                    <br><br>
                    <b>Q. Heart characters represents myself.</b><br>
                    I always look around and look around, feel vulnerable and sometimes live scary days, but I live with
                    positive thoughts. I once experienced depression and social phobia, but all of this is overcome by
                    the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs,
                    which are looking for happiness through new challenges and adventures.
                    <br><br>
                    <b>Q. Heart characters represents myself.</b><br>
                    I always look around and look around, feel vulnerable and sometimes
                </p>
            </div>
        </div>
    </div>
    <!-- 팝업 및 팝업 뒷배경 -->

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            modal_popup();
        });
        const modal_popup = function () {
            $('.modal p').click(function () {
                $('.popup__dim').addClass('modal');
                $('.popup').addClass('open');
            });

            $('.popup__dim, .popup__close').click(function () {
                $('.popup__dim').removeClass('modal');
                $('.popup').removeClass('open');
            });
        }
    </script>
</body>

</html>

 

6.  실행

Document

View as interview text

Artist Interview

x

Heart characters represents myself. I always look around and look around, feel vulnerable and sometimes live scary days, but I live with positive thoughts. I once experienced depression and social phobia, but all of this is overcome by the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs, which are looking for happiness through new challenges and adventures.

Q. Heart characters represents myself.
I always look around and look around, feel vulnerable and sometimes live scary days, but I live with positive thoughts. I once experienced depression and social phobia, but all of this is overcome by the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs, which are looking for happiness through new challenges and adventures.

Q. Heart characters represents myself.
I always look around and look around, feel vulnerable and sometimes live scary days, but I live with positive thoughts. I once experienced depression and social phobia, but all of this is overcome by the power of love. I hope that positive energy will spread to the world through Happy Heart NFTs, which are looking for happiness through new challenges and adventures.

Q. Heart characters represents myself.
I always look around and look around, feel vulnerable and sometimes

 

 

저작자표시 비영리 변경금지

'웹 개발 > 자주쓰는 코드' 카테고리의 다른 글

tab menu custom 심플 반응형  (1) 2022.11.03
jquery scroll event 순수제작  (2) 2022.11.03
SSL 인증서 총정리  (3) 2022.10.26
php recaptcha v3 사용법 심플적용  (8) 2022.09.15

+ Recent posts

티스토리툴바