jquery modal popup custom1

2022. 11. 3. 15:07

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

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

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

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

퍼블리셔 이과장

jquery modal popup custom1

1. 설명

2. HTML

3. CSS

4. JS

5. 전체

6. 실행

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

+ Recent posts

티스토리툴바