27 lines
1.0 KiB
PHP
27 lines
1.0 KiB
PHP
|
<!-- 트리거 버튼 -->
|
||
|
|
<button id="openModalBtn" class="btn btn-primary">열기</button>
|
||
|
|
|
||
|
|
<!-- 기본 모달 구조 -->
|
||
|
|
<div id="customModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1050;">
|
||
|
|
<div style="background:white; width:1920px; margin:100px auto; padding:20px; border-radius:8px; position:relative;">
|
||
|
|
<h4>기본 모달</h4>
|
||
|
|
<p>이것은 부트스트랩이 아닌 순수 모달입니다.</p>
|
||
|
|
<button id="closeModalBtn" class="btn btn-secondary">닫기</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('openModalBtn').onclick = function() {
|
||
|
|
document.getElementById('customModal').style.display = 'block';
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById('closeModalBtn').onclick = function() {
|
||
|
|
document.getElementById('customModal').style.display = 'none';
|
||
|
|
};
|
||
|
|
|
||
|
|
// 바깥 클릭 시 닫기
|
||
|
|
document.getElementById('customModal').onclick = function(e) {
|
||
|
|
if (e.target === this) this.style.display = 'none';
|
||
|
|
};
|
||
|
|
</script>
|