[Web] 홈페이지 공지사항 팝업창 띄우는 알아보기

 홈페이지에서 공지 팝업창을 띄우는 방법을 알아봅니다.

 

[ Contents ]

 

 

1. HTML

        <div id="popup">
            <div class="popup_content">
                <h2>공지사항</h2>
                <p>
                    공지사항 내용입니다.
                </p>
                <div class="close">닫기</div>
            </div>
        </div>

 공지사항 팝업창이 될 <div>를 간단히 만들어봅니다.

 닫기 버튼도 <div> 태그를 이용해서 만듭니다.

 

 위와 같은 팝업창을 공지사항 탭 링크를 누르면 띄우도록 만들어보겠습니다.

 

2025.06.13 - [Web] - [Web] 홈페이지 탭 전환 기능 구현하기 (addClass, removeClass 이용)

[Web] 홈페이지 탭 전환 기능 구현하기 (addClass, removeClass 이용)

 탭 구현은 이전 글을 참고해주세요.

 

 

2. CSS

/* popup */
#popup{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 10;
}

#popup .popup_content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 5px;
    padding: 20px 20px 100px;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
    width: 500px;
}

#popup .popup_content .close{
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #333;
    color: #fff;
    cursor: pointer;
    padding: 5px 8px;
}

#popup.active{
    display: block;
}

 팝업창은 웹페이지 정가운데에 위치하도록 position: fixed와 상하좌우를 0으로 줍니다. 특히 팝업은 가장 위에 배치되어야 하므로, z-index를 10 정도로 높게 주고 display: none으로 숨김 처리합니다.

 이후 active 클래스가 있으면 display: block으로 보이도록 설정합니다.

 

반응형

 

3. Java Script

// 탭 공지사항 팝업
let popupLink = $('#notice li:first');	// 가장 첫 번째 공지사항 클릭 시
let popup = $('#popup');
let popupCloseBtn = popup.find('.close');

popupLink.click(function(e){
    e.preventDefault(); /* 링크속성 제거 */
    popup.addClass('active');
});
popupCloseBtn.click(function(){
    popup.removeClass('active');
});

 첫번째 공지사항 클릭 시 팝업창이 뜨도록 자바스크립트를 구현합니다.

 첫 공지사항을 클릭하면 active 클래스가 추가되고, 닫기 버튼을 누르면 active 클래스가 제거되도록 설정합니다.