웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Popbox.js 모달 팝업 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] Popbox.js 모달 팝업

해피CGI윤실장 2021. 7. 19. 09:30


위의 이미지를 보시면 기능 확인이 바로 되실 겁니다.

소스 적용도 간단합니다.


<script type="text/javascript"> var popbox = new Popbox({ blur:true, overlay:true, }); </script>


위의 스크립트와


<div data-popbox-id="mypopbox1" class="popbox"> <div class="popbox_container"> Popbox content 1 <button data-popbox-close="mypopbox1">Close</button> </div> </div> <div data-popbox-id="mypopbox2" class="popbox"> <div class="popbox_container"> Popbox content 2 </div> <button data-popbox-close="mypopbox2">Close</button> </div> <div class="popbox_main_content"> Main content of the page <button data-popbox-target="mypopbox1"> Open mypopbox 1 </button> <button data-popbox-target="mypopbox2"> Open mypopbox 2 </button> &nbsp </div>




위의 기본 HTML 을 참고하시면 되겠습니다.

 

 

 

홈페이지바로가기

Comments