모달창 띄우기 (숙제 1)

  <div class="modalFull hidden" id="modal">
    <div class="modal_background"></div>
    <div class="modal">
      <div class="modal_content"></div>
      <h1>모달창</h1>
      <div class="selectOption">
        <input type="text" placeholder="자랑 제목을 작성해주세요">
        <select id="typeofTool">
          <option value="키보드">키보드</option>
          <option value="모니터">모니터</option>
          <option value="마우스">마우스</option>
          <option value="책상">책상</option>
          <option value="이외">이외</option>
        </select>
        <input type="text" class="toolsContents" placeholder="간단하게 자랑을 해주세요">
        <input type="file" name="fileName">
      </div>
      <div class="buttons">
        <button id="modal_register">등록하기</button>
        <button id="modal_exit">닫기</button>
      </div>

div가 뭔가 꼬인 것 같기도 하지만 모달창을 만들기 위한 HTML 코드 입니다. 해당 내용을 기초로 css를 구성해줍니다.

  .modal_background {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal {
    display: flex;
    background-color: white;
    border-radius: 20px;

    width: 300px;
    height: 400px;
    padding: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .modal h1 {
    width: 300px;
    margin: 20px 10px 10px 10px;
    text-align: center;
  }


  .buttons {
    width: 300px;
    position: absolute;

    text-align: center;
    bottom: 0;
    margin-bottom: 20px;
  }

  .modal button {
    display: inline;
    width: 100px;
  }

  .selectOption {
    position: absolute;
    display: grid;
    height: 250px;
    margin-top: 80px;
    padding: 10px;
  }

  .selectOption input {
    height: 30px;
    width: 250px;
  }

  .selectOption select {
    height: 20px;
  }

  .selectOption .toolsContents {
    height: 100px;
  }

  .hidden {
    visibility: hidden;
  }

css 기본 구성입니다. 일단 중간위치하고 위치가 고정되는 특징을 갖고 있으며 모달창 이외의 부분은 뿌옇게 블러 처리되는 식으로 코드 구성되었습니다.

<script>

  const modal = document.getElementById("modal")


  //등록하기 눌렀을 때 모달창 띄우기
  document.getElementById("register").addEventListener("click", function popupModal() {
    console.log(modal)
    modal.classList.remove("hidden")
  })

  //닫기를 눌렀을 때 닫기
  document.getElementById("modal_exit").addEventListener("click", function popupModal() {
    console.log(modal)
    modal.classList.add("hidden")
  })

  //백드롭 기능 구현
  modal.addEventListener("click", e => {
    const evTarget = e.target
    if (evTarget.classList.contains("modal_background")) {
      modal.classList.add("hidden")
    }
  })
</script>

모달창의 js 코드입니다. 코드 설명은 주석으로 간단히 되어있습니다.

결과입니다. 배경이 검은색이라 블러처리는 티가 많이 나진 않네요.

튜터님 1차 숙제였고, 하루정도 걸렸습니다.
나중에는 한시간안에는 구성 가능하도록 익숙해져야할 것 같습니다.
그래도 숙제로 너무 재밌었습니다. 감사합니다 튜터님