[javascript] modal 창으로 팝업띄우기

모달과 모달리스의 차이는 모달외의 화면창이 클릭이 되냐 안되냐의 차이이다.

​

▶ HTML

<span class="cs_form radio" id="rescan_list">
   <input type="radio" id="view_rescan" name="viewtype" value="rescan">
   <label for="view_rescan">검색</label>
</span>
<!-- The Modal -->
<id="dtsch_modal" class="dtsch_modal modal">
  <!-- Modal content -->
  <div class="modal-cnt">
     <span class="modal_close">&times;</span>                                                               
     <p class="tit">상세검색</p>
  </div>
</div>

▶ CSS

/* modal */
.modal {display: none;position: fixed;z-index: 99999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.modal-cnt {background-color: #fefefe;margin: 10% auto;border: 1px solid #888;width: 50%;height: 498px;border-radius: 5px;}
.modal_close {color: #aaa;float: right;margin-right: 16px;line-height: 53px;font-size: 28px;font-weight: bold;}
.modal_close:hover,
.modal_close:focus {color: #fff;text-decoration: none;cursor: pointer;}
.modal-cnt p.tit{width: 100%;padding-left: 17px;height: 53px;line-height: 53px;font-size: 18px;color: #fff;background: #353536;border-radius: 5px 5px 0 0;}

▶ JAVASCRIPT

$(document).ready(function() {
        
		// 모달창 
		// 모달창id얻기
        var modal = document.getElementById('dtsch_modal');
        // 클릭id얻기
        var btn = document.getElementById("view_rescan");
        // 닫기
        var close = document.getElementsByClassName("modal_close")[0];                                          
        //검색버튼클릭시 모달창 block
        btn.onclick = function() {
            modal.style.display = "block";
        }
        // close_btn클릭시 모달창none
        close.onclick = function() {
            modal.style.display = "none";
        }
        // 모달창외 클릭시 모달 닫힘
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
  });