5. [PHP] Modal창에서 ESC 시 Modal창 닫기

안녕하세요.

저는 PHP로 웹페이지를 만들다가 Modal창을 자주 이용했습니다.

Modal창은 다른화면을 클릭하면 저절로 닫히는데, ESC키는 먹히지 않는데 싫었습니다.

그래서 ESC키도 먹으면 좋을거같다고 생각하여 검색해보았고, 좋은방법을 찾아 공유해드리고자 합니다.

 

제가 현재 PHP에서 사용중인 Modal 창입니다. (예시)

<div id="today_data_Modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 모달 헤더 -->
            <div class="modal-header">
                <h4 class="modal-title">금일 내역</h4>
            </div>

            <!-- 모달 바디 -->
            <div class="modal-body" id="employee_today_detail">
            </div>

            <!-- 모달 풋터 -->
            <div class="modal-footer">
                <button type="button" class="close_btn btn btn-default" data-dismiss="modal">닫기</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){

    $(document).on('click', '.view_today_data', function(){
		employee_id = $(this).attr("id");

        $.ajax({
            //selectToday.php 로 가서
            url:"selectToday.php",
            method:"POST",

            //위에서 클릭한 employee_id 데이터를 url로 넘겨주고
            data:{employee_id:employee_id},

            success:function(data){
                //성공하면 select.php에서 뿌린 데이터를 data 변수에 담아 모달-바디에 붙여라
                $('#employee_today_detail').html(data);
                $('#today_data_Modal').modal("show");
            }
        });
    });
});
</script>

 

---

모달 화면 자체에 tabindex 속성을 주게되었는데요, 이는 해당 속성을 가진 태그에 focus를 할 수 있게되고, focus가 가는 순간부터 키보드 입력이 가능해지게 하는 속성입니다.

tabindex="0"

 

그 후에, 모달창을 눌렀을 때 'ESC'를 누르면 모달창이 꺼지도록 하는 코드를 추가해주었습니다.

// ESC 키 누르면 모달창이 꺼지도록
$modal = document.querySelector('.modal');
$modal.addEventListener('keydown',e=>{
    if(e.key==='Escape') $modal.style.display = 'none';
});

 

---

처음 코드에서 ESC를 눌렀을 때 모달창이 꺼지도록 추가 한 전체 코드입니다.

 

전체 코드

<div id="today_data_Modal" class="modal fade"  tabindex="0">     <!-- tabindex="0" = 모달창에서 ESC 키 누르면 모달창 닫히도록 -->
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 모달 헤더 -->
            <div class="modal-header">
                <h4 class="modal-title">금일 내역</h4>
            </div>

            <!-- 모달 바디 -->
            <div class="modal-body" id="employee_today_detail">
            </div>

            <!-- 모달 풋터 -->
            <div class="modal-footer">
                <button type="button" class="close_btn btn btn-default" data-dismiss="modal">닫기</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){

    $(document).on('click', '.view_today_data', function(){
    
    	// ESC 키 누르면 모달창이 꺼지도록
        $modal = document.querySelector('.modal');
        $modal.addEventListener('keydown',e=>{
            if(e.key==='Escape') $modal.style.display = 'none';
        });
        
	var employee_id = $(this).attr("id");

        $.ajax({
            //selectToday.php 로 가서
            url:"selectToday.php",
            method:"POST",

            //위에서 클릭한 employee_id 데이터를 url로 넘겨주고
            data:{employee_id:employee_id},

            success:function(data){
                //성공하면 select.php에서 뿌린 데이터를 data 변수에 담아 모달-바디에 붙여라
                $('#employee_today_detail').html(data);
                $('#today_data_Modal').modal("show");
            }
        });
    });
});
</script>

 

 

이렇게 하면 Modal 화면에서 ESC를 눌렀을 때 Modal 화면이 꺼지는것을 확인할 수 있습니다.

감사합니다.