본문으로 바로가기

Layer Pop-up (레이어 팝업)

category Code Lab 2016.09.29 13:11

일반 레이어 팝업 & 딤(Dim)처리 레이어 팝업

이 포스팅에서는 간단한 레이어 팝업에 대해 알아봅니다.

하단의 참조 링크에 다양한 타입의 레이어 팝업도 참고하시기 바랍니다.




Simple Layer Pop-up

See the Pen xwRNdQ by jaeheekim (@jaehee) on CodePen.





Jaehee's WebClub



댓글을 달아 주세요

  1. BlogIcon FLT13 신고">2016.05.01 17:52 신고

    좋은 정보 감사합니다.

  2. JEON 2017.02.13 14:07

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

    • BlogIcon 재희 jaiyah 신고">2017.02.13 15:20 신고

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

  3. crowsok 2017.03.15 14:12

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

    • BlogIcon 재희 jaiyah 신고">2017.03.16 16:35 신고

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

  4. 디자이너지 2017.03.16 14:01

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

  5. nox 2017.04.22 09:43

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

    • BlogIcon 재희 jaiyah 신고">2017.04.24 10:00 신고

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

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

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

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

    • BlogIcon 재희 jaiyah 신고">2017.07.06 16:02 신고

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

  7. daze 2017.08.01 10:07

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

  8. BlogIcon 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

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