CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Vue.js 를 사용하던 와중, 모달(modal) 팝업을 사용하려고 하는데, 음.. css 로 z-index를 설정하고 뭐하고~ 해도 모달팝업이 정상적으로 안나오더라구요?

그래서 공식문서를 조금조금 뒤져보곤 했습니다.
공식문서에서도 Teleport를 Modal-Popup 에서 사용했습니다. (맨 아래 링크)

그래서 알게 된 <Teleport>

😎 How to Use

네, Vue.js 답게 사용자에게 편의성을 제공해주죠. 매우매우 간단합니다.

<Teleport to="body" v-if="updateClicked">
  <UpdateItemModal @closeModal="closeModal" /> <!--모달 컴포넌트-->
</Teleport>

저는 이렇게 사용하였습니다.

 to  속성(attribute)이 태그의 대상을 나타내어 body 태그 ( 단 한개의 body가 있으니까요) 를 바라보게 되어 element의 최상단에 위치하게 된다고 합니다.

그래서 z-index 999 로 설정하고 출력하였더니 정상적으로 출력되었습니다. (이렇게 부족한 css 실력을 메웁니다.)

😶 부연설명 

- v-if 를 통해 어떤 내용을 클릭하면 modal 창이 출력되도록 설정하였습니다.
- closeModal 이벤트를  emit으로 받도록 하였습니다.

결과물 이미지입니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다. 

모달팝업을 만드는 방법을 포스팅하려고 합니다.

추가적으로 바깥 영역을 클릭했을 때 모달이 사라지게 하고 싶습니다.

1) Modal Show 버튼을 클릭 시 Modal Popup 출력.
2) 바깥영역, close 버튼을 클릭 시 Modal Popup 숨김.

이 두 가지 동작이 가능하게 하려고합니다.

// App.vue > 모달 창을 포함하고 있는 메인 뷰
<template>
  <div>
    <button type="button" @click="showModal">Modal Show</button>
    <ModalView
      v-show="showStatus"
      v-model="showStatus"
      @closeModal="closeModal"
    />
  </div>
</template>

<script>
import ModalView from "./Modal.vue";

export default {
  components: {
    ModalView,
  },
  data() {
    return {
      showStatus: false,
    };
  },
  methods: {
    showModal() {
      this.showStatus = true;
    },
    closeModal() {
      this.showStatus = false;
    },
  },
};
</script>

showStatus 라는 ref 를 기본 값으로 false 로 놓고, true가 되었을 때만 팝업이 뜨도록 처리하려고 합니다.

이벤트 핸들러가 호출하는 메서드로 showModal() 과 closeModal() 을 생성하였습니다.

직관적으로 show는 show를, close는 close를 작성하여 shoStatus 의 값을 true/false로 변경하겠습니다.

// Modal.vue
<template>
  <div class="modal-view" @click="closeModal">
    <div class="modal-view-area" @click.stop="">
      <h2 class="modal-text-header">Modal View</h2>
      <div class="block-content"></div>
      <div class="modal-bottom">
        <button class="modal-btn" @click="closeModal">Close</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: { showStatus: Boolean },
  methods: {
    closeModal() {
      this.$emit("closeModal");
    },
  },
};
</script>

props로 showStatus를 전달받아 바깥영역, 닫기 버튼을 클릭하면 $emit을 통해 closeModal 이벤트를 발생시킵니다. 

그리고 App.vue에서 closeModal 메서드를 호출하게 되어 모달 팝업을 숨김처리합니다.

다른건 다 그렇다고 치고, 코드를 자세히 살펴보시면, 특별한 처리를 하지 않았는데, 모달창의 영역을 클릭하였을 때는 팝업이 안닫히지만, 그 외의 영역을 클릭하였을 때는 닫히는 것을 볼 수 있습니다.

처음에는 css의 z-index 를 설정하면 영역 컨트롤이 가능한줄 알고 열심히 z-index를 설정했었죠.

그러나 vue.js 공식 문서에 숨겨져있는 한 내용을 확인하게되었습니다.

바로 이 부분입니다.

<div class="modal-view" @click="closeModal">
    <div class="modal-view-area" @click.stop="">

바로 @click.stop 입니다. 이게 바로 핵심.

@click.stop을 작성해준 부분의 영역은 클릭이벤트 전부를 멈추게 만듭니다. 

추가적으로 button에 @click 이벤트 핸들러를 제공한것처럼 명시하지 않는다면 말이죠.

이렇게 작성해주시면,  모달 영역을 클릭해도 닫히지 않는 모습을 보여줍니다. 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Vue.js + tailwind.css 를 이용하여 모달창을 구현하도록 하겠습니다.

컴포넌트의 개념을 첨가하였으니, 양해바랍니다. (컴포넌트 넣을줄만 알면 됨)

<template >
  <div
    v-if="ModalDisplay"
    class="shadow-lg w-full h-full flex bg-black bg-opacity-70 justify-center align-middle items-center ">
      <div class="w-1/3 h-1/2 bg-white rounded relative">
        <div class="relative w-full">
            <div class="flex text-center items-center justify-center pt-2">
                <h1 class="font-bold text-2xl">모달창 레이아웃</h1>
            </div>
            <svg 
                @click="ModalDisplay = false" 
                id="closeModalBtn" xmlns="http://www.w3.org/2000/svg" class=" cursor-pointer h-10 w-10 absolute top-0 right-0 hover:text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </div>
        <div class="w-full pt-5">
            <hr>
            <p class="py-5 px-5 text-xl">
                안녕하십니까?<br>
                모달창입니다.
            </p>
        </div>
        <div class="w-full">
            <button
                @click="ModalDisplay = false" 
                class="absolute bottom-0 right-0 border border-solid round w-24 h-10  my-2 mx-3 hover:text-red-700 hover:border-red-500" >
            닫기</button>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            ModalDisplay: true,
        }
    }
}
</script>

<style>

</style>

v-if 와 @click 바인딩으로 해당 기능을 구현하였습니다.

ModalDisplay를 기본값으로 true로 해서 자동적으로 출력되어져있게 해놓고,
닫기 버튼이나, X버튼을 눌렀을 때 종료가 되게 하는 겁니다. 

svg를 button으로 감싸서 button으로 바꾸는게 용도에 맞아 좋아보입니다.

혹시나해서 App.vue 도 게시

<template>
  <Modal />

</template>

<script>
import Modal from './components/Modal.vue';

export default {
  components: {
    Modal,
  },
}
</script>

<style>

</style>