IT 노하우

IT 노하우

JAVASCRIPT 자바스크립트 레이어 일반 팝업 띄우기

페이지 정보

profile_image
작성자 no_profile 넷짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물
댓글 0건 조회 1,388회 작성일 22-09-29 13:51

본문


JS 




//팝업 열기 

function openPop() { document.getElementById("popup_layer").style.display = "block"; } //팝업 닫기

 function closePop() { document.getElementById("popup_layer").style.display = "none"; }



HTML 


<div class="popup_layer" id="popup_layer" style="display: none;">

<div class="popup_box">

<div style="height: 10px; width: 375px; float: top;">

<a href="javascript:closePop();"><img src="/static/img/ic_close.svg" class="m_header-banner-close" width="30px" height="30px"></a>

</div>

<!--팝업 컨텐츠 영역-->

<div class="popup_cont">

<h5> POPUP TILTE</h5> <p>팝업 내용 </p>

</div> 

<!--팝업 닫기 버튼 영역--> <div class="popup_btn" style="float: bottom; margin-top: 200px;"> <a href="javascript:closePop();">닫기</a> </div>


</div> <!--popup box div -->

</div> <!--popup layer div -->


CSS


/*popup*/ 

.popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } /*팝업 박스*/ .popup_box{position: relative;top:50%;left:50%; overflow: auto; height: 600px; width:375px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);} /*컨텐츠 영역*/ .popup_box .popup_cont {padding:50px;line-height:1.4rem;font-size:14px; } .popup_box .popup_cont h2 {padding:15px 0;color:#333;margin:0;} .popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 30px;} /*버튼영역*/ .popup_box .popup_btn {display:table;table-layout: fixed;width:100%;height:70px;background:#ECECEC;word-break: break-word;} .popup_box .popup_btn a {position: relative; display: table-cell; height:70px; font-size:17px;text-align:center;vertical-align:middle;text-decoration:none; background:#ECECEC;} .popup_box .popup_btn a:before{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} .popup_box .popup_btn a:after{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);} .popup_box