카테고리1프로그래밍
카테고리2JAVASCRIPT
제목모달
작성자고성훈
작성일2021-09-29 07:12:51
<style>
.modalWrap{position:fixed;width:100%;height: 100%;background: rgba(0, 0, 0, 0.6);display:block;margin:0px;padding:0px;top:0px;left:0px;z-index:99999;}
.modalWrap .modal{position:relative;width: 50%;padding:0px 10px 0px 10px;height:700px;display: block;margin:auto;background: white;top:100px;vertical-align: middle;border-radius: 15px;}
.modalWrap .modal .modalBar{width:100%;height: 64px;text-align: right;vertical-align:middle;margin:0px;padding:0px;padding-top: 10px;}
.modalWrap .modal .ContWrap{height: 90%;margin:0px;padding:0px;border:0px;overflow-y: scroll;margin-top: 5px;}
.modalWrap .modal .ContWrap caption{display:none;}
.modalWrap .modal .table_c{word-break:break-all;}
.modalWrap .modal .mo_scroll{display:none;}
.md_close{background: black; color:white !important; width: 47px;height: 47px;display: inline-block;font-size: 0;}
.md_close2{display: none;padding: 5px 64px;background-color: #183482;color: #fff;border-radius: 20px;}
</style>
<script>
<br>
var preEl = null;
$(function(){

$(".modalWrap").click(function(e){
toggleModal("", null);
});
<br>
$(".modal").click(function(e){ // modalWrap 자식요소인 modal을 클릭했을 때 모달창 닫기 방지
e.stopPropagation();
});

$(document).on("keydown", "body", function(){
if(event.keyCode == "27"){
toggleModal("", null);
}
});


$(document).on("keydown", ".modalLastEl", function(e){
if(event.keyCode == "9" && e.shiftKey == false){
e.preventDefault();
$(".modalFirstEl").focus(); // 가장 위에 있는 닫기버튼에 포커스
}
});

$(document).on("keydown", ".modalFirstEl", function(e){
if(event.keyCode == "9" && e.shiftKey){
e.preventDefault();
$(".modalLastEl").focus(); // 가장 밑에 있는 닫기버튼에 포커스
}
});
<br>
});
<br><br>
// 모달 열기, 닫기
function toggleModal(menu_no, el){
// 모달을 열 때 클릭한 요소를 저장해놓고 모달을 닫을떄 그 요소부터 탭 시작
if(el!=null){
preEl = $(el);
}else{
preEl.focus();
}

if($(".modalWrap").css("display") == "none"){
$(".modalWrap").css("display", "");
$(".modalFirstEl").focus(); // 가장 위에 있는 닫기버튼에 포커스
}else{
$(".modalWrap").css("display", "none");
}
}
<br>
</script>
<br><br>
<!-- MODAL START -->
<div class="modalWrap" style="display:none;">
<div class="modal">
<div class="modalBar"><a href="javascript:toggleModal('', null);" class="modalFirstEl"><span class="btn red">닫기</span></a></div>
<div class="ContWrap">
</div>
</div>
</div>
<!-- MODAL END -->
<br>
수정목록