• 로그인

메뉴

카테고리1	카테고리1 선택프로그래밍
카테고리2	카테고리2 선택AICSSDBGitJAVAJAVASCRIPTMCPmysqlNESTJSREMIX도커리액트리액트 네이티브미들웨어브라우저서버스벨트킷스프링스프링부트오라클자바자바스크립트플러터
제목
작성자
<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>

저장뒤로가기