버튼 클릭시 레이어 팝업 띄우기!! 배경 쉐도우 처리
블랙리쉬 ・ 2017. 6. 21. 15:29 버튼이나 글자를 클릭시 레이어 팝업을 띄우고 싶을 경우
다른 스크립트와 충돌되지 않게 간단히 처리 가능한 팝업이 있기에 기록에 남겨두기 위하여 정리합니다.
요즘은 레이어 팝업 노출시에도 배경은 쉐도우 처리로 진행되기에 해당 기능까지 가능한 소스이니 필요하신 분들은
참고사히면 될듯 합니다.
<script>
$(document).ready(function(){
$("#popup_open").click(function(){
$("#popup_wrap").css("display", "block");
$("#mask").css("display", "block");
});
});
</script>
<script>
$(document).ready(function(){
$("#popup_open").click(function(){
$("#popup_wrap").css("display", "block");
$("#mask").css("display", "block");
});
$("#popup_close").click(function(){
$("#popup_wrap").css("display", "none");
$("#mask").css("display", "none");
});
});
</script>
<style>
#popup_wrap { width:560px; height:270px; background:#fff; border: solid 1px #666666; position:fixed; top:50%; left:50%; margin:-250px 0 0 -250px; z-index:9999; display:none;}
#mask {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.7) repeat; top:0; left:0; z-index:999; display:none;}
.popup-cont01 {width:478px; margin: 40px auto; text-align: center;}
.popup-cont01 button { width: 138px; height: 36px; line-height: 36px; background: #9f2f60; color: #ffffff; text-align: center; border: none; font-size: 16px;}
</style>
각
숫자들 중 붉은 글씨 부분은 편하게 변경하시면 됩니다.
<div id="popup_wrap">
<div class="popup-cont01">
<button title="location.href='링크경로삽입'";>링크텍스트 삽입</button>
<button id="popup_close">닫기</button>
</div>
</div>
<div id="mask"></div>
위와 같이 진행하면 간단하게 버튼이라 글자 클릭시 레이어 팝업 진행이 가능하다.
닫기의 경우
버튼과 텍스트로 2개를 사용하고 싶을 경우
위 스크립트 중 파란색 부분을 한번 더 카피해서 사용한다.
이때,
popup_close 와 다른 이름을 적용해 준다.
예) popup_close2
컨텐츠 삽입 부분에서 id 값도
popup_close2 로 변경해 주면 된다.
<li id="popup_open"><a href="#none">레이어팝업 클릭</a></li>
|