94일차 - 웹기능사 팝업창

4. 팝업 띄우기

4-1. 공지사항 1번글 클릭 시, 팝업창 뜨도록

• < body > 맨 위? 아래? -> 상관없음! < /body > 위에 작성 (relative 때문에 css 꼬이잖아)
  z-index 있으니까 먼저 읽어들여서 상관없음.

4-1-1) HTML

        <div id="popupnm" class="abs bg-white zup">
            <button class="abs">닫기</button>
            <p>팝업 컨텐츠 삽입하기</p>
        </div>

4-1-2) CSS

<style>

#popupnm{
    /* 내 너비를 모를 때 */ /* 알면 margin : 0 auto */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-color: white;
    padding: 20px;
    
    display: none;
    }
    
</style>

4-1-3) 제이쿼리

• 공지사항 첫번째 글 클릭하면 팝업창 뜨도록
  d-none 상태에서 addClass('d-block')

CSS 추가

.d-block{display:block !important}

<script>

    $('[href="#popupnm"]').click(function(e){
        e.preventDefault;
        $('#popupnm').addClass('d-block');
    })
    
</script>

• 닫기 버튼 누르면 창 닫힘
  공지사항 nth-child하게 생겼어? [href="#popupnm"] 클릭!

<script>

    $('[href="#popupnm"]').click(function(e){
        e.preventDefault;
        $('#popupnm').addClass('d-block');
    })
    // 닫기 버튼
    $('#popupnm button').click(function(e){
        e.preventDefault;
        $('#popupnm').removeClass('d-block');
    })
    
</script>

결과물