search

레이어팝업 여러개 - leieopab-eob yeoleogae

1 년도s ~ 전에
코멘트: 0
견해: 132

댓글을 달아 주세요

  2. JEON 2017.02.13 14:07

    Show

    질문이 있습니다. 저기 변수에 ~~ 표시 담으신건 어떤 의미인가요? 특수기호라서 검색이 어렵네요ㅜㅜ

    • 답글달기
    • 수정/삭제

    • 특수기호 "~~" 는 tilde(틸데)라는 기호로 자바스크립트에서 소숫점을 버려주는 Math.floor() 와 같습니다.
      다시 말해, Math.floor() 를 대체하여 사용하실 수 있습니다.
      그리고 한 개만 사용할 경우와 두 개 연속사용할 경우가 다르니 주의하세요.

      • 답글달기
      • 수정/삭제

  3. crowsok 2017.03.15 14:12

    좋은 정보 주셔서 감사합니다. (__) 위 내용 참고해서 팝업 만들고 있는데...
    딤처리 팝업으로 여러번 띄울시 아이디값 layer1, layer2...이렇게 주면 dim-layer block 처리가 전체 아이디값에 다 적용되네요... 해당 팝업에만 적용할려면 어떻게 해줘야 하나요?

    • 답글달기
    • 수정/삭제

    • 선택자를 반복문으로 클릭하도록 하시거나 해야하는데 여기서 설명드리기엔 애매하네요 ^^;
      관련된 링크에 다른 팝업스크립트도 있으니 해결이 안되신다면 다른 것을 참고하셨으면 해요.
      도움이 되지 못해 죄송해요;;

      • 답글달기
      • 수정/삭제

  4. 디자이너지 2017.03.16 14:01

    팝업이 안나오네요...T_T

    • 답글달기
    • 수정/삭제

    • 어떤 상황에서 안나오는지 알 수가 없어서 뭐라 설명을 드리기가..;;;

      • 답글달기
      • 수정/삭제

  5. nox 2017.04.22 09:43

    스크롤 기능 넣을려는데 어디에 어떻게 넣어야 할까요?

    • 답글달기
    • 수정/삭제

    • 레이어 팝업 내에서 스크롤을 사용하시려고 하는 건가요?
      그렇다면 일반 스크롤 css 를 사용하듯이 똑같이 사용하시면 됩니다.
      보통 레이어 팝업에서는 스크롤되는 영역을 콘텐츠만 스크롤 되도록 하기 때문에 그 해당 영역에 최대 높이값을 설정하신 후에 overflow-y: auto; 로 설정하셔도 됩니다.
      방법이 여러가지이니 스크롤 css 등으로 키워드를 구글링하셔서 도움받아 보세요~

      • 답글달기
      • 수정/삭제

  6. jsp 공부하는중 2017.05.30 19:02

    <html>
    <head>
    <style>
    css 코드 넣음
    </style>
    <script>
    js코드 넣음
    </script>
    <body>
    html 코드 넣음
    </body>
    </head>

    이런식으로 했는데 팝업창이 안떠요 ㅜㅜ 코드 수정없이 그냥 예제로 만들어서 공부하려고 했는데요

    • 답글달기
    • 수정/삭제

    • 답변이 많이 늦었네요^^;
      작성해주신 소스를 보니 head 태그가 잘못 닫힌 듯합니다.
      html 은 크게 head 와 body 로 구성되어 있습니다. 다시 말해 head, body 태그는 형제 관계입니다.
      도움이 되셨길 바랍니다.

      • 답글달기
      • 수정/삭제

  7. daze 2017.08.01 10:07

    ㅜ ㅜ 레이어 팝업이 여러개 뜰 수는 없나요? 아이디만 다르게 했더니 겹쳐서 떠서요..

    • 답글달기
    • 수정/삭제

  8. 레이어팝업 여러개 - leieopab-eob yeoleogae
    MSE 2017.09.11 23:38

    좋은 정보 감사합니다.
    그런데 위 코드를 그대로 복사해서 html로 만들면 적용이 안되는데 원래 html문 안에 css와 js를 연결하는 문장이 있지 않나요?

    • 답글달기
    • 수정/삭제

    • ㅇㅇ 2017.09.26 20:32

      지나가다 답변드려요! <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 이 코드 같이 삽입해주시면 됩니다~

      • 답글달기
      • 수정/삭제

  9. POZZ 2018.03.12 11:00

    배경눌렀을때에 닫기구현도 하고 싶은데 어떻게 하나요?

    • 답글달기
    • 수정/삭제

  10. 지나다가 2019.01.02 11:52

    그대로 사용해도 작동을 안하네요. 스크립트 에러도 없는데 난감하군요.

    • 답글달기
    • 수정/삭제

  11. 태태 2019.10.23 22:12

    좋은 정보 감사합니다. 가져다 써도 될가여?

    • 답글달기
    • 수정/삭제

  12. yellow 2020.07.29 14:09

    좋은정보 감사합니다~ 근데 버튼 클릭시 뜨는 팝업 말고
    사이트 열자마자 자동으로 뜨는 레이어팝업 소스도 알 수 있을까요?

    • 답글달기
    • 수정/삭제

  13. angie 2020.08.01 16:43

    갑자기 jquery로 팝업 작업이 필요했는데 큰 도움이 되었습니다 감사해요!

    • 답글달기
    • 수정/삭제

마크업을 하고 페이지를 만드는 과정에서 스크립트를 이용해 만드는 이벤트 중 스크롤, 탭과 마찬가지로 많이 사용하는게 있다면 아마 팝업이 될 것이다.

특정 버튼이나 영역을 클릭하면 그 버튼에 해당하는 내용을 가진 팝업은 웹페이지 작업시 빼놓을 수 없는 이벤트이다.

1. 클릭 이벤트 발생 시키기

팝업을 노출시키기 위해선 특정 버튼이나 영역을 클릭해야한다.

이 때 .addEventListener 메소드를 사용한다.

<a href="#pop_info_1" class="btn_open">팝업 열기</a>
<a href="#pop_info_2" class="btn_open">팝업 열기2</a>

<!-- 팝업1 -->
<div id="pop_info_1" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>

<!-- 팝업2 -->
<div id="pop_info_2" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다222.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>


<script>
  var target = document.querySelectorAll('.btn_open'); // 클릭할 버튼요소를 변수 처리

  // 팝업 열기
  for(var i = 0; i < target.length; i++){
    target[i].addEventListener('click', function(){
      targetID = this.getAttribute('href');
      document.querySelector(targetID).style.display = 'block';
    });
  }
</script>

위와 같이 target이라는 팝업을 열 버튼을 변수 처리한 후에

addEventListner로 click 이벤트를 걸어준다.

이 때, 클릭 이벤트는 .btn_open이 하나가 아니기 때문에

for 문을 돌려 .btn_open의 갯수에 맞춰 각각 버튼에 클릭 이벤트를 걸어준다.

2. 버튼 클릭 후 노출 될 팝업 영역 호출하기

버튼을 클릭하는 액션은 만들었다면

버튼 클릭 액션 동작 후 팝업 영역을 노출되게 만들어야한다.

<a href="#pop_info_1" class="btn_open">팝업 열기</a>
<a href="#pop_info_2" class="btn_open">팝업 열기2</a>

<!-- 팝업1 -->
<div id="pop_info_1" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>

<!-- 팝업2 -->
<div id="pop_info_2" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다222.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>


<script>
  var target = document.querySelectorAll('.btn_open');
  var targetID;  // 버튼 클릭시 버튼에 해당하는 팝업의 id값 담는 변수

  // 팝업 열기
  for(var i = 0; i < target.length; i++){
    target[i].addEventListener('click', function(){
      targetID = this.getAttribute('href');
      document.querySelector(targetID).style.display = 'block';
    });
  }
</script>

팝업열기 버튼을 (btn_open)을 클릭 할 때

a 태그의 href의 값과 팝업의 id값을 일치시켜줘서 접근성으로도 해당 버튼과 팝업이 연결되도록 작업하고

추가로 여러 버튼과 팝업이 나오더라도 스크립트를 추가하지 않고

a태그의 href와 팝업의 id값만 맞춘다면 언제든지 수월하게 팝업을 만들 수 있게 위와 같이 작업하였다.

(현재 클릭한 a태그의 href를 가져오는 this.getAttribute('href');)

3. 팝업 닫기

팝업을 열었으면 닫기 버튼의 동작도 필요하다.

팝업을 열 때와 마찬가지로 페이지에 있는 .pop_wrap 내부에 있는 .btn_close 닫기 버튼을

for문을 돌려 각각 클릭 이벤트를 걸어준 뒤

해당 버튼의 부모 노드(pop_wrap)을 찾아서 해당 div를 닫아준다.

<a href="#pop_info_1" class="btn_open">팝업 열기</a>
<a href="#pop_info_2" class="btn_open">팝업 열기2</a>

<!-- 팝업1 -->
<div id="pop_info_1" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>

<!-- 팝업2 -->
<div id="pop_info_2" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다222.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>


<script>
  var target = document.querySelectorAll('.btn_open');
  var targetID;

  // 팝업 열기
  for(var i = 0; i < target.length; i++){
    target[i].addEventListener('click', function(){
      targetID = this.getAttribute('href');
      document.querySelector(targetID).style.display = 'block';
    });
  }
  
  // 팝업 닫기
  for(var j = 0; j < target.length; j++){
    btnPopClose[j].addEventListener('click', function(){
      this.parentNode.parentNode.style.display = 'none';
    });
  }
</script>

4. 예시 화면

버튼이 여러개, 팝업이 여러개인 예시를 통해서

왜 위와 같이 a태그의 href 속성을 통한 팝업을 작업하는지 예시를 들어보려한다.

레이어팝업 중복 다중 팝업창 띄우기 팝업창 여러개 공통 모달 팝업 레이어 팝업 만들기 홈페이지 레이어 팝업

관련 게시물

도미노 방문 포장 할인 - domino bangmun pojang hal-in
도미노 방문 포장 할인 - domino bangmun pojang hal-in

삼국지14 신개성 만들기 - samgugji14 singaeseong mandeulgi
삼국지14 신개성 만들기 - samgugji14 singaeseong mandeulgi

국가장학금 학자금대출 같이 - guggajanghaggeum hagjageumdaechul gat-i
국가장학금 학자금대출 같이 - guggajanghaggeum hagjageumdaechul gat-i

마이프로틴 할인코드 vvip - maipeulotin hal-inkodeu vvip
마이프로틴 할인코드 vvip - maipeulotin hal-inkodeu vvip

광고하는

최근 소식

몬헌 월드 대검 세팅 - monheon woldeu daegeom seting
1 년도s ~ 전에 . ~에 의해 HypotheticalShopping
비 로 시작하는 단어 - bi lo sijaghaneun dan-eo
1 년도s ~ 전에 . ~에 의해 AscendingPolling
카톡 전체 멘션 방법 - katog jeonche mensyeon bangbeob
1 년도s ~ 전에 . ~에 의해 BulkyMotto
원신 프레임 올리기 - wonsin peuleim olligi
1 년도s ~ 전에 . ~에 의해 InsufferableConflict
일러스트 png 테두리 - illeoseuteu png teduli
1 년도s ~ 전에 . ~에 의해 BrokeSnail
세탁기 통세척 시간 - setaggi tongsecheog sigan
1 년도s ~ 전에 . ~에 의해 BackstageAllergy
4음보 율격 예시 - 4eumbo yulgyeog yesi
1 년도s ~ 전에 . ~에 의해 AngularLeasing
경기도 예비군 훈련장 - gyeong-gido yebigun hunlyeonjang
1 년도s ~ 전에 . ~에 의해 RemainingAllergy
개구쟁이 뽀로로 가사 - gaegujaeng-i ppololo gasa
1 년도s ~ 전에 . ~에 의해 BroadHegemony
시 놀로지 하드 소리 - si nolloji hadeu soli
1 년도s ~ 전에 . ~에 의해 VehementCatfish

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의

homeendefrjpkoptzhhiitthtr
저작권 © 2024 ko.ketiadaan Inc.