모달 팝업 샘플
퍼블(pub2026)이 제공하는 모달 시스템을 쓰는 방법입니다.
CSS(.wrap-modal)·엔진(common.skin.js)·헬퍼(sdisModal.js)가 모두 전역 로드되어 있어
이 화면에는 <script>·<link> 가 하나도 없습니다.
① 선언형 — 버튼에
class="modal-open" data-name="모달ID". 클릭하면 바로 열립니다(퍼블 엔진이 처리).② JS 호출 —
fnOpenModal('모달ID'). ajax 조회·그리드 생성이 끝난 뒤에 열어야 할 때 씁니다.닫기는 어느 쪽이든
class="modal-close" 버튼 또는 fnCloseModal('모달ID') · ESC 키.
※ 두 방식은 같은 상태(
.is-current)를 쓰므로 섞어 써도 어긋나지 않습니다.
1. 선언형 — 버튼 클릭 = 바로 열기
가장 흔한 경우. data-name 이 모달 id 와 같으면 됩니다. JS 를 한 줄도 안 씁니다.
2. JS 호출 — 조회한 뒤에 열기 (구 showlayer() 대체)
퍼블 엔진은 DOMReady 에 .modal-open 을 직접 바인딩하므로,
내용을 나중에 채우거나 동적으로 만든 버튼은 처리하지 못합니다. 그때 fnOpenModal() 을 씁니다.
3. 확인 / 취소 버튼이 있는 모달
처리 후 닫을 때는 fnCloseModal('모달ID') 를 호출합니다.
.modal-close 클래스를 붙이면 클릭만으로도 닫힙니다.
4. 모달 위에 모달 (겹쳐 열기)
스크롤락은 마지막 모달이 닫힐 때만 해제됩니다.
(헬퍼가 .wrap-modal.is-current 개수를 보고 판단 — 퍼블 원본 로직의 빈틈을 보완한 부분)
쌓임 순서는 ‘연 순서’입니다. 퍼블 CSS 는 .wrap-modal.is-current 에
모두 같은 z-index:99999 를 줘서, 그대로 두면 브라우저가 DOM 순서로 그립니다
— 나중에 연 모달이라도 마크업이 위쪽에 있으면 뒤로 깔립니다.
헬퍼가 열 때마다 z-index 를 올려 주므로 JSP 안에서 모달을 어떤 순서로 적어도 됩니다.
(2026.08.11 추가 — 다운로드 화면에서 ‘항목조건’ 모달 안의 ‘입력’ 으로 연
‘통합코드 조회’ 모달이 뒤에 숨는 실제 버그로 발견)
※ 겹친 게 잘 보이도록 첫 번째는 넓게(920px), 두 번째는 좁게(460px) 크기를 다르게 줬습니다
— 퍼블 기본값은 둘 다 680px 입니다.
· 하단 버튼줄은
<div class="modal-footer board-button"> 입니다 (퍼블 4차 정본 — 시안 ppt-111·112·145·146·147·61).
🚨.modal-cont 밖, .modal-body 직속에 둬야 합니다. 그래야 .modal-body 가 flex 컬럼이 되어
본문만 스크롤되고 버튼줄은 바닥에 고정됩니다(common.css:1030~). 안에 넣으면 긴 모달에서 버튼이 화면 밖으로 밀립니다.· 버튼 클래스 — 주동작은
button-fill01, 닫기·취소는 button(그대로) 입니다.
(시안 6개 중 4개가 단독 닫기에 plain button 을 씁니다. button-frame01 은 파랑이라 주동작처럼 보여 씁니다 — 2026.08.13 실제로 그렇게 보여 되돌림)· 닫기는
modal-close 클래스로 됩니다(onclick 불필요). 예: <button class="button modal-close">
(2026.08.13 이전엔 금지였습니다 — 퍼블이 [class*='close'] 로 X 자리에 절대배치했기 때문. 4차에서 :not([class*='button']) 으로 좁혀져 해소)⚠단
button 이 들어간 클래스가 반드시 함께 있어야 합니다. class="modal-close" 만 있으면 여전히 우측 상단 X 아이콘으로 그려집니다.⚠닫기 외에 할 일이 있으면(폴링 중단 등) 종전처럼
onclick="fnCloseModal('ID')" 로 자기 함수를 부르세요.· 넓은 표·그리드는 폭을 인라인으로 지정합니다 —
<div class="modal-body" style="max-width:1034px;">.
기본은 680px 이고, 시안이 쓰는 값은 750 / 820 / 1034px 세 가지입니다.· 모달 마크업은 본문 어디에 둬도 되지만, 다른 요소의
overflow:hidden 안에 넣으면 잘릴 수 있습니다 — 되도록 화면 최하단에 모아두세요.·
id 는 화면 안에서 유일해야 합니다(data-name 이 id 로 찾습니다).·
/pub2026/** 는 절대 직접 수정하지 마세요. 퍼블 다음 차수 전달분에 덮입니다. 보완이 필요하면 /js/common/sdisModal.js 처럼 우리 파일에 둡니다.· 이 모달 CSS 는
layout2 계열(.comn.fw.sub2/.main2)에서만 로드됩니다.
온보딩(*/*.otiles)·팝업 레이아웃에서는 함수는 있지만 스타일이 없어 딤·중앙정렬이 안 나옵니다.· 모달 안에 목록(표)을 넣는다면 — 스크롤·머리글 고정·체크박스 열은 팝업 안 그리드(표) 샘플 에 표준으로 정리해 두었습니다. 여기서 즉흥적으로 높이를 잡으면 머리글이 같이 스크롤되거나 하단 버튼이 잘립니다.
퍼블 표준 모달입니다. 아래가 자동으로 동작합니다.
- 배경 딤 처리 (
.wrap-modal::before) - 뒤 페이지 스크롤 잠금
Tab키가 모달 안에서만 순환 (focus trap)ESC키로 닫기- 닫으면 열었던 버튼으로 포커스 복귀
선택한 항목을 삭제하시겠습니까?
이 위에 두 번째 모달을 열어 봅니다.
이걸 닫아도 스크롤락은 유지됩니다(첫 번째가 아직 열려 있으므로).