채택완료

추천 버튼 art 창대신에...

혹시 추천 누르면 art 창뜨는거대신에 추천했습니다. 하고 싹 나타났다가

사라지는 그런걸 뭐라고해야지 나올까요?

창뜨는거 없애고 나타났다가 사라지는 그걸로 바꾸고싶은데 검색어를 뭐로해야할지

당최 생각이 나질않네요.

|

답변 2개 / 댓글 1개

채택된 답변
+20 포인트
4년 전

이와 비슷한 예시 소스를 알려드리겠습니다.

 

HTML

Copy
<body>

<div class="openPopup">클릭하면 팝업이 나와요</div>   

<div id="popup01">

    <div class="close">close</div>

    <div>팝업 내용</div>

</div>

</body>

 

CSS

Copy
#popup01{

    display: none;

}

#popup01{

width: 500px;

height: 500px;

position: absolute;

top: 50%;

left: 50%;

margin: -250px 0 0 -250px;

background-color: #fff;

z-index: 2;

    }

.backon{

    content: "";

    width: 100%;

    height: 100%;

    background: #00000054;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1;

}

.close{

  position:absolute;

  top:-25px;

  right: 0;

  cursor:pointer;

}

.openPopup{

  cursor:pointer;

}

 

jquery / javacript

Copy
$(document).ready(function( $ ){     

    $(".openPopup").on("click", function(event) {  //팝업오픈 버튼 누르면

    $("#popup01").show();   //팝업 오픈

    $("body").append('<div class="backon"></div>'); //뒷배경 생성

    });

    $("body").on("click", function(event) { 

        if(event.target.className == 'close' || event.target.className == 'backon'){

            $("#popup01").hide(); //close버튼 이거나 뒷배경 클릭시 팝업 삭제

              $(".backon").hide();

        }

      });

  });

 

찾으시는 비슷한 소스가 이게 맞는지 모르겠네요.

 

이걸 보고 본인 홈페이지의 소스에 맞게 수정하시면 될꺼같습니다.

답변에 대한 댓글 1개

홈페이지맞게 수정하니 원하는대로 잘나오네요~~!!
감사해유!!

레이어 팝업으로 검색을 해보시면 될거 같습니다. 

플러그인 종류도 많은걸로 알고 있습니다. 검색을 해보시고 직접 디자인을 하시거나 원하시는 형태의 소스를 찾아보시면 될거 같습니다.

답변을 작성하려면 로그인이 필요합니다.