2nd/10_Wiki/Topics/Topic_Programming/Topic_W3CSS/W3CSS_Modal.md at 51add2736f9446ceef7d2964aedca69501458248

Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

4.5 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

🎯 한 줄 통찰 (One-line insight)

Closing a modal by clicking its OUTER background is implemented by attaching the close handler to the OUTER w3-modal div itself (onclick="this.style.display='none'"), not to a separate overlay element like the Sidebar chapter's w3-overlay — meaning the modal's backdrop and its click-to-close target are literally the same element, a simpler structure than the sidebar's two-element (sidebar + overlay) approach. [S1]

🧠 핵심 개념 (Core concepts)

w3-modal — the outer full-screen container/backdrop, hidden by default (display:none), shown via style.display='block'. [S1]
w3-modal-content — the actual visible dialog box nested inside w3-modal; can contain any HTML (headers, footers, images, forms). [S1]
Click-outside-to-close — either onclick="this.style.display='none'" directly on the w3-modal div, or a window.onclick handler checking event.target == modal. [S1]
Header/footer sectioning — <header>/<footer> with w3-container classes inside w3-modal-content create structured dialog sections, reusing the Containers chapter's pattern. [S1]
Animated entrance — any w3-animate-* class on w3-modal-content (zoom/top/bottom/left/right), or w3-animate-opacity on the OUTER w3-modal itself to fade the backdrop. [S1]
Modal as image viewer / lightbox — clicking a thumbnail image sets a shared modal's <img> src dynamically via JS, avoiding one modal per image. [S1]

📖 세부 내용 (Details)

Basic modal structure: <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button><div id="id01" class="w3-modal"><div class="w3-modal-content"><div class="w3-container"><span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span><p>Some text..</p></div></div></div>. [S1]
Click-outside-to-close via window-level listener: var modal = document.getElementById('id01'); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }. [S1]
Dynamic image gallery modal (one shared modal, src swapped per click): function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; }. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

모달 vs 사이드바의 배경 클릭 처리 구조 차이: 사이드바는 별도 w3-overlay 요소를 두지만, 모달은 w3-modal 자체에 onclick을 걸어 배경 클릭을 처리한다는 구조적 차이가 있음(요소 하나로 배경+닫기 트리거를 겸함). [S1]

🛠️ 적용 사례 (Applied in summary)

현재 발견된 실제 적용 사례가 없습니다 — 슬라이드쇼를 모달 안에 넣는 "라이트박스(Lightbox)" 조합이 이미지 갤러리 UI의 실전 활용 사례로 예고됨(Slideshow 챕터 교차 참조). [S1]

💻 코드 패턴 (Code patterns)

Closing a modal by clicking anywhere outside its content (JavaScript):

var modal = document.getElementById('id01');
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual
출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
신뢰 점수: 0.87
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: W3.CSS Tutorial
관련 개념: W3CSS Slideshow, W3CSS Sidebar, W3CSS Tooltips
참조 맥락: UI Components 섹션 마지막 직전 — 툴팁(Tooltips) 챕터로 이어짐.

📚 출처 (Sources)

[S1] W3Schools — W3.CSS Modal — https://www.w3schools.com/w3css/w3css_modal.asp

📝 변경 이력 (Change history)

2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Modal" page (Astra wiki-curation, P-Reinforce v3.1 format).

4.5 KiB Raw Blame History

W3CSS Modal