riverlee1132의 공책

[제이쿼리] 팝업 띄우기 본문

오답노트

[제이쿼리] 팝업 띄우기

1132 2022. 11. 2. 16:43

 

제이쿼리를 사용할 준비를 모두 해놓았다는 가정하에

 

 

 

제이쿼리를 사용하여 팝업 만들기

열기 버튼을 누르면 팝업이 뜨고, 닫기 버튼을 누르면 팝업이 사라지는걸 만들어보자.

 

1. html body에 팝업창을 만든다

<body>
  <div class="popup">팝업입니다
    <button class="close">닫기</button>
  </div>

  <button class="open">열기</button>
</body>
 

 

 

 

2. css로 모양을 꾸며준다.

.popup{
display:none;
position:absolute; 
left:50%; 
top:50%; 
transform:translate(-50%, -50%); 
width:400px; 
height: 400px; 
border: 1px solid blue; 
background:#e0e0e0;
}
 

<풀이>

display:none;

팝업은 열기 버튼을 클릭했을 때 보여야하기 때문에 보이지 않게 한다.

 

position:absolute;

이하는 팝업창을 중앙에 위치시키기 위한 코드

 

width:400px;

이하는 창의 스타일을 꾸민다

 

 

 

3. js 에 만들어놓은 요소들이 팝업으로 작동하는 명령을 입력한다.

$(document).ready(function(){
  $('.open').on('click',function(){
    $('.popup').show();
  });
  $('.close').on('click', function(){
    $('.popup').hide();
  });
});
 

<풀이>

$(document).ready(function(){

문서의 시작

 

$('.open').on('click',function(){

$('.popup').show();

open 클래스를 가진 요소를 click하면 popup이라는 클래스를 가진 것을 show 해주세요.

 

$('.close').on('click', function(){

$('.popup').hide();

close 클래스를 가진 요소를 click하면 popup이라는 클래스를 가진 것을 hide 해주세요.

 

 

4. 대상 지정

팝업이 한개라면 위와 같은 방법으로 끝나겠지만, 팝업이 여러 개일 때는 정확하게 대상을 지정해주어야한다.

3번 제이쿼리 코드에서 close 부분 한줄만 수정해보자.

$('.close').on('click', function(){
  $(this).parent('.popup').hide();
});
 

<풀이>

$('.close').on('click', function(){

$(this).parent('.popup').hide();

 

click하는 대상인 .close 의 parent인 .popup을 hide 해주세요.

이렇게 하면 정확한 대상(close의 parent인 popup)을 지정해서 작동한다.

이것을 응용해서 내가 원하는 팝업으로 꾸미면 된다.

 

'오답노트' 카테고리의 다른 글

[제이쿼리] select 버튼 만들기  (0) 2022.11.02
[CSS] 이미지를 넣는 2가지 방법: img 태그, background 선택자  (0) 2022.11.02
[제이쿼리] 이벤트 메서드  (0) 2022.11.02
'오답노트' Related Articles more