페이지 로드시 자동으로 뜨는 CSS 전용 모달 라이트박스

이전 글에서 CSS만으로 모달/라이트박스를 추가하는 방법을 공유했는데, 많은 분들이 버튼 클릭 없이 페이지 로드 시 자동으로 팝업이 뜨게 하는 방법을 물어보셨습니다. 여기에서 그 정확한 방법을 설명합니다.

이전 글 Easy Modal Lightbox Pop-Up에서 CSS만으로 팝업 또는 모달 라이트박스를 추가하는 방법을 소개했습니다. 이번에는 버튼을 사용하지 않고 페이지 로드시 모달 팝업을 띄우는 방법에 대한 요청이 많아, 단계별로 알려드립니다.

HTML

아래 코드를 복사해 HTML 문서에 붙여 넣으세요.

<div id="modal-1" class="modal animate-opacity">
   <div class="modal-content">
      <div class="modal-inner">
         <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">&times;</span>
         <h4>Modal Headline</h4>
         <p>Modal description goes here.</p>
      </div> 
   </div>
</div>

CSS

아래 코드를 복사해 CSS 파일에 붙여 넣으세요.

.modal {
	z-index: 10;
	display: flex;
        align-items: center;
        justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-opacity는 선택 사항으로, 모달이 열릴 때 애니메이션을 담당합니다. 현재 속도는 opac 0.8s이며 필요에 따라 조정할 수 있습니다.

문제 해결 (팝업이 보이지 않을 때)

• CSS 로딩 확인: 모달은 display: block 및 고정 오버레이 스타일에 의존합니다. 테마가 이를 덮어쓰지 않는지 확인하세요.
• z-index 충돌 확인: z-index가 더 높은 헤더/스티키 바가 모달을 가릴 수 있습니다. 필요하면 .modal { z-index: 9999; }로 올리세요.
• 숨김 규칙 점검: 일부 테마/플러그인은 .modal{display:none}을 설정합니다. CSS에서 이런 규칙이 있는지 검색하세요.
• HTML은 페이지당 한 번만: 중복 ID나 다중 인스턴스는 이상 동작을 유발할 수 있습니다.
• 캐시/CDN: 변경 사항이 보이지 않으면 캐시를 비우세요.

참고: 위 닫기 버튼은 인라인 onclick을 사용합니다. 완전 무(無)자바스크립트 변형이 필요하면, 체크박스/라벨 패턴을 추가할 수 있습니다.