본문 바로가기
웹/(LIBRARY) JQUERY

[코딩 공부_95] jQuery로 modal, tab 만들기

by BEE_0o0 2021. 6. 13.

jQuery로 modal, tab을 만들어보자!

<modal>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>modal practice</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    img {
        max-width: 100%;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 100;
    }
    .modal {
        width: 400px;
        background: #fff;
        padding: 1rem;
        border-radius: .5rem;
        border: 1px solid #999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .modal img {
        width: 150px;
    }
    .close__modal {
        position: absolute;
        top: -.5rem;
        right: -.5rem;
        background: #fff;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        padding-bottom: 4px;
        border: 1px solid #eee;
        cursor: pointer;
    }
</style>
</head>
<body>
    <button>
        show modal
    </button>
    <div class="overlay">
        <div class="modal">
            <div class="close__modal">
                x
            </div>
            <div class="modal__content">
                <h1>introduce</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam similique quo commodi placeat nostrum eius dolore alias reprehenderit aut nisi, est minima! Sunt, vitae illum ratione ut dolor perferendis sed.
                </p>
                <img src="" alt="">
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        var $modal = $('.modal');
        var $overlay = $('.overlay');
        var $btn = $('button');
        var $btnClose = $('.close__modal');

        $overlay.hide();
        $btn.click(function(){
            $overlay.fadeIn();
        })
        $btnClose.click(function(){
            $overlay.fadeOut();
        })
        $overlay.click(function(e){
            // target은 내가 클릭한 객체
            // currentTarget은 이벤트가 발생한 객체
            if(e.target == e.currentTarget){
                $(this).fadeOut();
            }
        })
    </script>
</body>
</html>

 

<modal-multi>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
    img {
        max-width: 100%;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 100;
        display: none;
    }
    .modal {
        width: 400px;
        background: #fff;
        padding: 1rem;
        border-radius: 1rem;
        border: 1px solid #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .modal img {
        padding: .5rem;
    }
</style>
</head>
<body>
    <section>
        <div class="container">
            <h1 class="portfolio__title">portfolio</h1>
            <div class="portfolio">
                <a href="#" class="portfolio__img">
                    <img src="http://placehold.it/300x300/000" alt="">
                </a>
                <a href="#" class="portfolio__img">
                    <img src="http://placehold.it/300x300/00f" alt="">
                </a>
                <a href="#" class="portfolio__img">
                    <img src="http://placehold.it/300x300/0ff" alt="">
                </a>
            </div>
        </div>
        <div class="overlay">
            <div class="modal">
                <img src="http://placehold.it/300x300/05f" alt="">
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            // 이미지를 클릭했을 때
            var $portfolioImg = $('.portfolio__img');
            var $overlay = $('.overlay');
            $portfolioImg.click(function(){
                // 모달이 뜨고 이미지를 출력
                var src = $(this).children('img').attr('src');
                var $modalImg = $('.modal img');
                console.log(src);
                // modal에 있는 img 엘리먼트 src에 이미지 주소를 세팅
                $modalImg.attr('src', src);
                $overlay.show();
            })

            $overlay.click(function(e){
                // target은 내가 클릭한 객체
                // currentTarget은 이벤트가 발생한 객체
                if(e.target == e.currentTarget){
                    $(this).fadeOut();
                }
            })
        })
    </script>
</body>
</html>

 

<tab>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
    <section>
        <div class="tab">
            <div class="tab__menu">
                <a href="#" data-index="0" class="flex flexbox=center selected">tab1</a>
                <a href="#" class="flex flexbox=center">tab2</a>
                <a href="#" class="flex flexbox=center">tab3</a>
                <a href="#" class="flex flexbox=center">tab4</a>
            </div>
            <div class="tab__content">
                <div class="tab__desc">
                    <h1>tab1</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                    </p>
                </div>
                <div class="tab__desc">
                    <h1>tab2</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                    </p>
                </div>
                <div class="tab__desc">
                    <h1>tab3</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                    </p>
                </div>
                <div class="tab__desc">
                    <h1>tab4</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni distinctio itaque natus! Accusantium molestiae reprehenderit explicabo, quidem sint repellat ratione, assumenda vitae aliquam delectus alias deleniti ducimus veniam sed dolorem!
                    </p>
                </div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        var $desc = $('.tab__desc');
        var $tabMenu = $('.tab__menu a');

        // 초기 세팅
        $desc.hide();
        $desc.eq(0).show();
        
        // tab 메뉴를 클릭하면 해당하는 desc를 보여준다
        $tabMenu.click(function(){

            var idx = $(this).index();
            $tabMenu.removeClass('selected');
            $(this).addClass('selected');
            $desc.hide();
            $desc.eq(idx).slideDown();
        })
    </script>
</body> 
</html>
저작자표시 비영리 변경금지

'웹 > (LIBRARY) JQUERY' 카테고리의 다른 글

[코딩 공부_98] jQuery로 img 무한 복제 시키기  (0) 2021.06.17
[코딩 공부_97] bx slider 사용하기  (0) 2021.06.16
[코딩 공부_96] slick 슬라이더 사용하기  (0) 2021.06.16
[코딩 공부_94] jQuery 기본 함수  (0) 2021.06.12
[코딩 공부_93] JS 라이브러리, JQuery import 및 적용방법  (0) 2021.06.11

관련글

댓글

티스토리툴바