[ Vue.js ] Modal 만들기

[ Vue.js ] 모달창 만들기 🤓

모달창 만드는 방법은 아주 쉽다 !
현재의 상태(false)를 저장하고 열렸을때의 상태(true)로 데이터를 변경해주면 끝 🥳

스위치를 껐다, 켰다 한다고 생각하면 이해가 쉽다.

html/css는 모달창 열렸을때를 생각하고 작성하면 쉽다.
다음 스위치를 꺼주면 모달창은 보이지 않는 상태가 되고,
모달창이 열릴 스위치에 click 이벤트를 만들고 스위치를 켜는 작업만 하면 된다!

html

<button @click="modalOpen">Modal</button>

<div class="modal-wrap" v-show="modalCheck">
  <div class="modal-container">
    
    ...  <!--  모달창 content  -->
    
    <div class="modal-btn">
      <button @click="modalOpen">닫기</button>
      <button @click="modalOpen">확인</button>
    </div>
  </div>
</div>

css

/* dimmed */
.modal-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
/* modal or popup */
.modal-container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}

data & methods

data() {
  return {
    modalCheck: false,
  }
},
methods: {
  modalOpen() {
    this.modalCheck = !this.modalCheck
  }
}

아주 간단하게 모달창이 만들어졌다.
이때, 좀 더 유저 친화적인 개발을 위한 기능을 추가해보자!

첫번째 닫기 버튼을 누르지 않아도 딤드를 클릭했을때
모달창이 닫히는 기능도 구현하면 좋을것 같아서 추가해보았다 🤓

<div class="modal-wrap" v-show="modalCheck" @click="modalOpen">
  <div class="modal-container" @click.stop="">
    
    ...  <!--  모달창 content  -->
    
  </div>
</div>

딤드 태그에@click="modalOpen"를 추가하고,
모달창에 꼭 @click.stop=""를 추가해주어야 한다.

@click.stop=""을 쓰지 않으면 이벤트 버블링으로 인해 모달창을 클릭해도 닫혀버리니까 잊지말고 꼭 써주기 !

두번째 유저 친화적인 기능인지는 모르겠지만 퍼블리싱 작업할때
"모달창 뒤에 컨텐츠 움직이지 않게 고정해주시면 안되나요?"라는 요청을 꽤 받아서 기본적으로 작업해두는 편이다. 🤓

watch: {
  modalCheck: function () {
    const html = document.querySelector('.html-overflow');
    if( this.modalCheck === true ){
      html.style.overflow = 'hidden'
    } else {
      html.style.overflow = 'auto'
    }
  },
},

watch 간단하게 설명하자면 모달창의 스위치 역할을 하는 modalCheck 데이터를 감시해서 데이터가 변경되면 이 함수를 실행해주세요~ 하는것 !

modalCheck 데이터가 변경되었을때,
조건문을 걸어 modalCheck 값이 true일때 스크롤을 못하게 막아주고
값이 true가 아닐때는 스크롤 가능하게 바꿔달라는 함수이다. 👊🏻

*주의! 컨텐츠가 길어서 스크롤이 생기게되었을때는
위의 방법처럼 스크롤을 막아버렸을때 컨텐츠가 살짝 움직이는 이슈가 생긴다.

이럴땐 html의 스크롤을 숨기고,
스크롤 기능만 가능하게 해두면 어느정도 해결이 되는것 같다.

html {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

어쨌든 기본 모달창은 스위치만 잘 기억해두면 언제든 뚝딱 만들수 있을것 같다!🔥