팝업레이어 만들기 > 웹프로그램

<style>

body{font-family:sans-serif;margin:0;padding:50px;background-color:#f5f5f5;text-align:center;}

.btn-open{padding:10px 20px;background-color:#28a745;color:white;border:none;border-radius:6px;cursor:pointer;font-size:16px;}

.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);justify-content:center;align-items:center;z-index:999;}

.popup-content{background:white;padding:30px;border-radius:12px;width:300px;box-shadow:0 10px 20px rgba(0,0,0,0.2);position:relative;}

.btn-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:18px;cursor:pointer;color:#888;}

.popup.show{display:flex;}

@media(max-width:400px){.popup-content{width:90%;padding:20px;font-size:14px;}}

</style>

  <button class="btn-open">팝업 열기</button>

  <div class="popup" id="popup">

    <div class="popup-content">

      <button class="btn-close" id="btnClose">&times;</button>

      <h2>알림</h2>

      <p>이것은 팝업 레이어입니다.</p>

    </div>

  </div>

  <script>

    const openBtn = document.querySelector('.btn-open');

    const closeBtn = document.getElementById('btnClose');

    const popup = document.getElementById('popup');

    openBtn.addEventListener('click', () => {

      popup.classList.add('show');

    });

    closeBtn.addEventListener('click', () => {

      popup.classList.remove('show');

    });

    // 바깥 영역 클릭 시 닫기

    popup.addEventListener('click', (e) => {

      if (e.target === popup) {

        popup.classList.remove('show');

      }

    });

  </script>