심플한 모달창

가볍게 쓸만한 모달창

버튼을 누르면 전체화면이 어두워지면서 가운데 창을 띄우고 또 버튼을 누르면 창이 닫히는 효과입니다. 핵심구성은 CSS와 JS 하나씩 이구요. 정말 가볍게 쓸 수 있지 않을까 싶어요!😀 그리고 예제 영상에서는 없지만 스크롤이 되어도 늘 가운데에 위치해 있는 모달창입니다.

심플한 모달 예제입니다!

HEAD와 /HEAD사이

<link rel="stylesheet" type="text/css" href="modal.css" />                
<!--js-->
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

HEAD안에는 CSS와 모달창을 작동가능하게 할 제이쿼리를 불러옵니다. CSS는 아래 첨부파일을 다운 받아주세요. 코드를 확인하면 .modal이나 .btn-close 그리고 .modal-wrapper에서 background 정도의 수정만 거쳐도 원하는 모달을 만드실 수 있을거에요!

modal.css

858 B

BODY와 /BODY사이

    <a class="btn trigger" href="#">모달창 띄우기</a>
        
    <!-- Modal -->
    <div class="modal-wrapper">    
          <a class="btn-close trigger" href="#">CLOSE</a>      
          <div class="modal">      
              모달창에 들어갈 내용을 넣으면 됩니다.                  
          </div>       
    </div>

	<script src="modal.js"></script>

BODY에 CLOSE는 이미지나 텍스트 모두 가능합니다. 그리고 모달을 열고 닫는 역할을 하는 JS파일을 불러옵니다. JS파일은 하단에 다운로드 해주세요!

modal.js

201 B

CSS와 JS파일을 불러오는 위치 잘 확인하시면 특별한 문제가 없다면 아주 잘 될 거에요! 급하게 모달 창 찾으시는 분들에게 도움이 되셨기를!