간단한 모달 레이어 만들기

모달은 현재 브라우저에서 화면전환이나 추가 윈도우 없이 메시지를 띄우는 기능입니다. 보편적으로 팝업보다는 모달을 주로 사용하며, 중요한 내용일 경우 배경 레이어를 추가하여 눈에 잘 보이도록 합니다.

가장 먼저 기초적인 틀을 잡아줍니다.

저기있는 '모달 창 열기' 버튼을 클릭하면, 모달 창이 나오게 하려고 합니다.

이제 모달 부분의 코드를 작성합니다.

<!doctype html>
<html>
<head>
    <title>Modal</title>   
</head>
<body>

<div id="root">
   
    <button type="button" id="modal_opne_btn">모달 창 열기</button>
       
</div>

<div id="modal">
   
    <div class="modal_content">
        <h2>모달 창</h2>
       
        <p>모달 창 입니다.</p>
       
        <button type="button" id="modal_close_btn">모달 창 닫기</button>
       
    </div>
   
    <div class="modal_layer"></div>
</div>

</body>
</html>

이 모달(modal)은 내용이 들어있는 modal_content와 배경 레이어를 담당하는 modal_layer로 구성되어있습니다.

modal_content에는 사용자에게 전하고자하는 내용과 닫기 버튼이 있으며, 닫기 버튼을 클릭하면 모달창을 닫을 수 있습니다.

물론, 지금은 HTML코드만 입력되었기에 아무런 기능도 없습니다.

이제 CSS를 추가합니다.

<style>
#modal {
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}

#modal h2 {
  margin:0;   
}

#modal button {
  display:inline-block;
  width:100px;
  margin-left:calc(100% - 100px - 10px);
}

#modal .modal_content {
  width:300px;
  margin:100px auto;
  padding:20px 10px;
  background:#fff;
  border:2px solid #666;
}

#modal .modal_layer {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.5);
  z-index:-1;
}   
</style>

modal_layey의 배경색(background)을 일반 rgb가 아닌, 투명도가 포함된 rgba를 이용하여 표현했습니다. 검은색(0, 0, 0)이지만 투명도가 50%이므로, 원래 화면이 어둡게 보일것 입니다.

또한 modal과 modal_layer의 z-index값을 부여하여, modal_layer가 가장 앞에 나올 수 있도록 했습니다.

그럴싸해 보입니다만, 아직 작동은 하지 않습니다.

이제 modal에 display:none;속성을 부여하여 보이지 않도록 합니다.

modal이 아예 없어졌으며, 버튼을 클릭하더라도 모달창은 보이지 않습니다.

이제 '모달 창 열기'버튼을 클릭하면, modal에 부여된 display:none; 속성이 display:block;으로 변경되도록 할 것이며, display:block;으로 변경된다면 모달창이 정상적으로 보일것 입니다.

자바스크립트를 이용하여 CSS를 제어하는 코드를 작성했습니다.

<script>
    document.getElementById("modal_opne_btn").onclick = function() {
        document.getElementById("modal").style.display="block";
    }
   
    document.getElementById("modal_close_btn").onclick = function() {
        document.getElementById("modal").style.display="none";
    }   
</script>

코드의 내용은, modal_opne_btn을 클릭하면 modal의 display값을 block으로 바꾸며, modal_close_btn을 클릭하면 modal의 display값을 none으로 바꾸는것 입니다.

'모달 창 열기'버튼을 클릭하면

이렇게 모달창이 나타납니다.

물론 '모달 창 닫기'버튼을 클릭하면 모달창은 없어집니다.

이번엔 제이쿼리 CDN를 추가하고

기존 스크립트는 주석으로 감싸준 뒤, 제이쿼리의 선택자를 이용한 코드를 작성합니다.

<script>
    $("#modal_opne_btn").click(function(){
        $("#modal").attr("style", "display:block");
    });
   
     $("#modal_close_btn").click(function(){
        $("#modal").attr("style", "display:none");
    });      
</script>

제이쿼리를 이용하면 자바스크립트만을 사용했을 때보다 간결해지며 가독성도 좋아지는 장점이 있습니다.

제이쿼리를 이용하려면 당연히 제이쿼리 라이브러리가 필수로 있어야하며, 그에 따라 사용자가 로딩하는데 시간이 걸린다는 단점이 있습니다. 또, 자바스크립트만으로도 구현가능한걸 굳이 제이쿼리를 사용해서 구현한다는것도 조금 이상하죠.

그래도 저는 선택자가 너무 편해서 제이쿼리를 선호합니다-_-;

제이쿼리에 있는 fadeIn과 fadeOut을 사용하면 서서히 나타나거나 사라지기 때문에 더욱 보기 좋게 만들 수 있습니다. 물론 보기만 좋을뿐이지 필수 기능은 아니지요.

영이4/16/2019
안녕하세요 .

맨위의 html 코드를 작성하면 html에서는

모달창열기
모달창
모달창입니다.
모달창닫기

으로 브라우저에 나오는데

css를 적용하고

모달창
모달창입니다
모달창닫기
이부분이 모달창으로 뜨는 부분이 단지 css의 적용으로 인해
가능한건가요??

이부분이 이해가 안가서 찾아봤는데
alert창처럼 modal()을 하기도 하던데
따로 이런거없이 css만으로 alert 창처럼 모달창이 어떻게 뜨는지 모르겠습니다
답글삭제
답글
Al7/26/2019
재밌네요 모달 레이어. 혹시 괜찮으시다면 팝업이 가운데 뜨는 건 어떻게 하는지 알려주실 수 있으세여?
답글삭제
답글
HyunCello5/29/2020
쉽게 모달창을 만들 수 있게 해 주셔서 감사합니다!
다만 바닐라 자바스크립트에 id쪽에 오타가 있어서 말씀드립니다ㅎㅎ
open이 opne로 작성이 되어 있습니다.

블로그 포스팅 감사드립니다!
답글삭제
답글
Unknown6/25/2020
혹시 작성하신거에서 조금 헷갈리는게 있는데 layer에 z-index를 -1로 주셨는데 이부분은 어차피 투명값을 주니까 그렇게 하신거죠? 실제 화면상에 하나의 div가 하나 더 있고 디폴트가 0이니 그럴땐 layer의 z-index를 1 content의 z-index를 2로 하는게 맞는건가요?
답글삭제
답글
펭귄별7/27/2021
안녕하세요. 모달에 파라미터를 전달하는 방법도 알 수 있을까요? 리스트에서 a태그로 감싼 해당 글을 클릭하면 상세보기로 넘어갈 때 no를 넘겨주고 싶습니다.. 파라미터 전달하는 방법만 알면 상세보기랑 수정하기도 모달에서 하려고 합니다. 검색을 해서 읽어봐도 잘 이해가 안 갔는데 여기는 친절하고 상세하게 설명이 잘 되어 있어서 혹시나 하는 마음에 질문 남겨봅니다
답글삭제
답글
익명4/25/2022
혹시 모달창에다가 이미지 삽입 가능한가요??
답글삭제
답글

댓글 추가