[코딩활용] 팝업창 만들기

오늘은 팝업창에 대해서 배워보겠습니다.

 

팝업창은 광고용으로 많이 쓰이기때문에 알아두면 좋아요

 

먼저 팝업창을 만들기 위해서 필요한 것은 html , css , js 입니다.

 

저는 버튼을 누르면 튀어나오는 팝업창을 만들어볼거예요

 

만드는 순서

 

1. 먼저 누르는 버튼을 만들어준다.

2. 튀어나오는 팝업창과 뒤에 어두운 검정배경을 만들어준다.

3. 튀어나와야하는 팝업창과 검정배경을 display: none;하여 안보이도록 한다.

4. js를 활용하여 버튼을 누르면 팝업창이 뜨도록 설정한다. 

 

** 자바스크립트 코드(괄호안에 요소만 바꾸어서 사용하시면 됩니다.)

 

//버튼을 클릭하면 팝업창과 검정배경이 dispaly:block이 되어나타난다.

$('button').click(function(){
    $('.popup-1,.popup-bg').css('display','block');
    $('html').addClass('no-scroll');
});

 

 

// btn-close를 누르면 팝업창과 검정배경이 다시 display:none;이 된다.

$('.popup-1 > .head > .btn-close').click(function(){
    $('.popup-1,.popup-bg').css('display','none');
    $('html').removeClass('no-scroll');
});

 

 

See the Pen 팝업창 by 박지연 (@qwer273) on CodePen.