[jQuery] modal / 팝업창 / 이미지 팝업

seulki·2022년 9월 30일

[jQuery]

목록 보기

17/30

부모창 위에 열려있는 팝업창(자식창)이 닫히기 전에는 부모창에 접근하지 못하게 하는 형태의 윈도우
window.open() 처리로는 modal 윈도우를 구현할 수 없기 때문에,
HTML 페이지 안에 빈 <div>를 숨겨놓고, 이벤트가 발생했을 때
팝업처럼 사용한다.

🎈CSS

 <style type="text/css">
        /** 공통 속성 설정 */
        * { padding: 0; margin: 0; }
        ul { list-style: none; }
        .pull-left { float: left; }
        .clearfix:after { content: ''; display: block; clear: both; float: none; }

        /** 목록 박스의 넓이 지정 및 중앙 배치 */
        .gallery { width: 700px; margin: auto; border: 5px solid #d5d5d5; }

        /** 각 항목에 대한 가로 배열 */
        .gallery .item { width: 25%; }

        /** 각 항목 링크에 대한 크기 지정 */
        .gallery .item .modal { display: block; margin: 10px; width: auto; }

        /** 이미지에 대한 테두리 제거 및 여백 지정 */
        .gallery .item .modal img { width: 100%; height: 100%; }

        /** 화면 전체를 덮는 배경 레이어의 위치, 크기, 투명도 지정 > 기본적으로 표시되지 않도록 설정 */
        .gray_layer {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background: black;
            opacity: 0.60;
            display: none;
        }

        /** 이미지가 표현될 레이어를 화면 중앙에 배치 > 기본적으로 표시되지 않도록 설정 */
        .over_layer {
            /* 요소의 좌측상단 꼭지점이 화면 중앙에 위치하게 된다. */
            position: fixed;
            top: 50%;
            left: 50%;
            /* 요소의 크기/2 만큼 왼쪽,상단 방향으로 이동시켜 가운데 배치한다 */
            margin-top: -244px;
            margin-left: -325px;
            display: none;
        }
    </style>

🎈HTML

<body>
    <!-- 화면에 표시될 원본 보기 영역 - 기본적으로 숨겨진 상태이다. -->
    <div class='gray_layer' id='background'></div>
    <div class='over_layer' id='front'></div>
    <!--
        <div class='over_layer' id='front'><img src='" + src +"'/></div>
    -->
    <!-- 이미지 목록 -->
    <ul class='gallery clearfix'>
        <li class='item pull-left'><a href="img/photo1.jpg" class="modal"><img src="img/photo1_thum.jpg" alt="샹드리아" /></a></li>
        <li class='item pull-left'><a href="img/photo2.jpg" class="modal"><img src="img/photo2_thum.jpg" alt="장미" /></a></li>
        <li class='item pull-left'><a href="img/photo3.jpg" class="modal"><img src="img/photo3_thum.jpg" alt="바다" /></a></li>
        <li class='item pull-left'><a href="img/photo4.jpg" class="modal"><img src="img/photo4_thum.jpg" alt="문" /></a></li>
        <li class='item pull-left'><a href="img/photo5.jpg" class="modal"><img src="img/photo5_thum.jpg" alt="바다" /></a></li>
        <li class='item pull-left'><a href="img/photo6.jpg" class="modal"><img src="img/photo6_thum.jpg" alt="꽃" /></a></li>
        <li class='item pull-left'><a href="img/photo7.jpg" class="modal"><img src="img/photo7_thum.jpg" alt="하늘" /></a></li>
        <li class='item pull-left'><a href="img/photo8.jpg" class="modal"><img src="img/photo8_thum.jpg" alt="건물" /></a></li>
    </ul>
   
    <script src="http://code.jquery.com/jquery-3.2.1.min.js">
</body>

페이지가 로드되면 작은 썸네일 이미지들이 표시되고
각각의 이미지를 클릭하면
window.open() 형태로 이미지 페이지가 로드된다.
이런 형식이 아닌, 팝업창의 형태로 이미지를 불러오려면,
HTML 페이지 안에 <div> 태그로 레이어를 만들어 놓는다.
이렇게 만들어 놓은 태그를 썸네일 이미지를 클릭하는 이벤트가 발생 될 때만 불러오면 되는 것이다.

🎈jquery 로 modal `<div>` 태그 불러오기

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $('.modal').on('click',function(e){
            //a태그가 가진 이벤트 막기
            e.preventDefault();

            $("#background").fadeIn(200);  //배경 레이어
            $("#front").fadeIn(200);  //이미지 레이어

            let src = $(this).attr('href'); // 클릭한 링크의 href 속성값
            let img = "<img src='" + src +"'/>"; //이미지 태그 구성 
            $('#front').html(img);

        });

        //화면에 표시된 배경 레이어를 클릭한 경우
       $('#background').click(function(){
        $(this).fadeOut(200);
        $("#front").fadeOut(200);
       }); 
</script>
$('.modal')인 썸네일 이미지를 클릭했을 때 실행될 익명함수

$('.modal')의 이벤트를 우선 막아준다. e.preventDefault();

<div>태그로 만들어 놓았던 $("#background") 레이어를 띄운다.

클래스가 'gray_layer'인 CSS 적용

<div class='gray_layer' id='background'></div>

그 다음 이미지를 띄울 $("#front") 레이어를 띄운다.

<div class='over_layer' id='front'></div> 이 <div> 영역에
이미지를 띄우기 위해서는, <img> 태그를 넣어줘야 하기 때문에
태그까지 텍스트로 입력할 수 있는 html() 을 사용해야 한다.

우선 이미지 태그에 들어갈 팝업 이미지는 <a>태그의 href 속성값이다.

그렇기 때문에 변수 src에 이벤트가 발생한 이미지인 $(this)의 href 속성 값을 담아준다.

이 속성값을 img태그로 감싼 img 변수를 생성한다.

<div class='over_layer' id='front'></div> 태그에
img 변수를 태그까지 html()메서드로 담아준다.
이렇게 하면, 이렇게 이미지태그가 들어가게 된다.

결국에 팝업 modal은 배경레이어와 이미지 레이어를 띄워서 만들게된다.

이렇게 자식 팝업창이 뜨게 되면, 부모창에는 접근할 수가 없다.

자식 창을 닫기 위한 이벤트를 넣어줘야한다.

배경 레이어를 클릭했을 때, 누른 레이어인 $(this)와, 이미지 레이어를 모두 닫을 수 있다.