추천 버튼 art 창대신에...
본문
혹시 추천 누르면 art 창뜨는거대신에 추천했습니다. 하고 싹 나타났다가
사라지는 그런걸 뭐라고해야지 나올까요?
창뜨는거 없애고 나타났다가 사라지는 그걸로 바꾸고싶은데 검색어를 뭐로해야할지
당최 생각이 나질않네요.
답변 2
이와 비슷한 예시 소스를 알려드리겠습니다.
HTML
<body>
<div class="openPopup">클릭하면 팝업이 나와요</div>
<div id="popup01">
<div class="close">close</div>
<div>팝업 내용</div>
</div>
</body>
CSS
#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
$(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();
}
});
});
찾으시는 비슷한 소스가 이게 맞는지 모르겠네요.
이걸 보고 본인 홈페이지의 소스에 맞게 수정하시면 될꺼같습니다.
홈페이지맞게 수정하니 원하는대로 잘나오네요~~!!
감사해유!!
레이어 팝업으로 검색을 해보시면 될거 같습니다.
플러그인 종류도 많은걸로 알고 있습니다. 검색을 해보시고 직접 디자인을 하시거나 원하시는 형태의 소스를 찾아보시면 될거 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
