[Modal] css로 간단하게 모달창 만들기

CSS로 간단하게 모달 창 만드는 코드 공유 드립니다.

X버튼과 CANCLE버튼으로 모달창 닫기 가능합니다.

 

😎HTML

 

모달 오픈 버튼

<div class="btn" id="add-btn">ADD</div>

<!-- 모달 -->
<div class="modal" id="modal">
  <div class="modal_body">
    <div class="m_head">
      <div class="modal_title">Add label name</div>
      <div class="close_btn" id="close_btn">X</div>
    </div>
    <div class="m_body">
      <div class="modal_label">Name</div>
      <input type="text" class="input_box" id="name_box"/>
      <div class="modal_label">Description</div>
      <input type="text" class="input_box" id="des_box"/>
    </div>
    <div class="m_footer">
      <div class="modal_btn cancle" id="close_btn">CANCLE</div>
      <div class="modal_btn save" id="save_btn">SAVE</div>
    </div>
  </div>
</div>
<!-- 모달 -->

😎 Script

// click on 라벨 추가 모달 열기
$(document).on('click', '#add-btn', function (e) {
  console.log("click event");
  $('#modal').addClass('show');
 
});
 
// 모달 닫기
$(document).on('click', '#close_btn', function (e) {
  console.log("click event");
  $('#modal').removeClass('show');
 
});

😎 css

    <style>
      .modal {
        position: absolute;
        top: 0;
        left: 0;
 
        width: 100%;
        height: 100%;
 
        display: none;
 
        background-color: rgba(0, 0, 0, 0.4);
      }
 
      .modal.show {
        display: block;
      }
 
      .modal_body {
        position: absolute;
        top: 50%;
        left: 50%;
 
        width: 800px;
        height: 600px;
 
        /* padding: 40px; */
 
        /* text-align: center; */
 
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 
        transform: translateX(-50%) translateY(-50%);
      }
      .m_head{
        height: 10%;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        background-color:#e7e5e5;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .m_body{
        height: 80%;
        padding: 20px;
      }
      .m_footer{
        height: 10%;
        padding: 15px;
        background-color:#e7e5e5;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        justify-content: end;
      }
      .modal_title{
        font-size: 18px;
        color: gray;
        font-weight: 500;
      }
      .close_btn{
        font-size: 20px;
        color: rgb(139, 139, 139);
        font-weight: 900;
        cursor: pointer;
      }
      .modal_label{
        padding-top: 10px;
      }
      .input_box{
        width: 100%;
        border: 1px solid rgb(189, 189, 189);
        height: 30px;
      }
      .modal_btn{
        width: 80px;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: bolder;
        padding-top: 5px;
        margin-left: 5px;
        font-family: sans-serif;
      }
      .cancle{
        background-color: white;
        color: black;
      }
      .save{
        background-color: rgb(50, 77, 158);
        color: white;
      }
    </style>