class를 활용해 popup 여러개 컨트롤하기

코드를 짜다보면 팝업을 한 페이지 안에서 여러개를 운용해야 하는 경우가 생긴다.

팝업 버튼과 팝업창을 공통 클래스와 팝업별 클래스 2개를 사용해 각각의 버튼과 팝업을 짝지어보자.

 

<span class="popBtn hellow">hellow 팝업을 여는 button</span>
<span class="popBtn bye">bye 팝업을 여는 button</span>

<div class="popWrap hellow">
	<!--팝업내용-->
    <span class="popX"></span>
</div>

<div class="popWrap bye">
	<!--팝업내용-->
    <span class="popX"></span>
</div>

$(function(){
    var btnClass="";
    var popClass="";

    $('.popBtn').on('click', function(){
        btnClass = $(this).attr('class');
        popClass = btnClass.split(/\s+/);

        $('.popWrap.'+popClass[1]).show();
        $('.html, body').css('overflow', 'hidden');
    })
    $('.popX').on('click', function(){
        $('.popWrap').hide();
        $('.html, body').css('overflow', 'auto');
    })
})

 

 

도움이 되셨다면 ❤ 한번만 부탁드립니다.

요즘 도통 일에 보람이 없어서요 주륵

누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏