[TIL] 1주차 수요일. 미니 프로젝트 팀 소개 - 네비바, 모달

1. 네비바 (navbar)

id값을 가리키는 a태그를 만든다. a태그 클릭 시 가리키는 곳으로 이동.

<header>
      <div class="header-logo">
        <a href="#nav-top"><img src="static/images/logoheader.svg" /></a>
      </div>
      <div class="navbar">
        <a href="#nav-team">팀 소개</a>
        <span>ㅣ</span>
        <a href="#nav-members">팀원 프로필</a>
        <span>ㅣ</span>
        <a href="#nav-comment">방명록</a>
      </div>
</header>

<section id="nav-members" class="section-members">

2. 모달 (modal)

• 자바스크립트 사용해서 모달 띄우고 닫기

<script>
  const modal = document.querySelector(".modal");
  const btnOpenModal = document.querySelector("#btn-open-modal");
  const btnCloseModal = document.querySelector(".btn-close-modal");
  /* 모달 열기 */
  btnOpenModal.addEventListener("click", () => {
    modal.style.display = "flex";
  });
  /* 버튼 클릭시 모달 닫기 */
  btnCloseModal.addEventListener("click", () => {
    modal.style.display = "none";
  });
</script>

• 제이쿼리 사용해서 외부영역(배경) 눌러도 모달이 닫히도록 하기

<script>
  const modal = document.querySelector(".modal");
  const btnOpenModal = document.querySelector("#btn-open-modal");
  const btnCloseModal = document.querySelector(".btn-close-modal");
  /* 모달 열기 */
  btnOpenModal.addEventListener("click", () => {
    modal.style.display = "flex";
  });
  /* 버튼 클릭시 모달 닫기 */
  btnCloseModal.addEventListener("click", () => {
    modal.style.display = "none";
  });
  /* 외부영역 클릭시 모달 닫기 (제이쿼리) */
  $(document).mouseup(function (e) {
    if ($(".modal").has(e.target).length === 0) {
      $(".modal").hide();
    }
  });
</script>