hubez-admin/frontend/src/components/modal/commonModal.vue

<template>
	<!-- <div class="wrap bg-wrap"> -->
	<div>

    <div class="dimmed modal01" @click="alertModalCancel();"></div>
    <div class="popup-wrap modal01">
      <!-- 로그인실패: 확인 -->
      <div class="popup modal01">
        <div class="pop-head">
          <h3 class="pop-tit">{{title}}</h3>
        </div>
        <div class="pop-cont">
          <p>{{ msg1 }}</p>
          <p v-if="msg2 !== ''">{{ msg2 }}</p>
          <p v-if="msg3 !== ''">{{ msg3 }}</p>
          <p v-if="msg4 !== ''">{{ msg4 }}</p>
        </div>
        <div class="popup-btn1">
          <button class="btn-pcolor" @click="alertModalClose();">확인</button>
        </div>
      </div>
    </div>

		<div class="dimmed confirm" @click="confirmModalCancel();"></div>
		<div class="popup-wrap confirm">
			<!-- 수정 확인 -->
			<div class="popup confirm">
				<div class="pop-head">
					<h3 class="pop-tit">{{title}}</h3>
				</div>
				<div class="pop-cont">
          <p>{{ msg1 }}</p>
          <p v-if="msg2 !== ''">{{ msg2 }}</p>
          <p v-if="msg3 !== ''">{{ msg3 }}</p>
          <p v-if="msg4 !== ''">{{ msg4 }}</p>
				</div>
				<div class="popup-btn2">
					<button class="btn-pcolor" @click="confirmModalClose();">확인</button>
					<button class="btn-default" @click="confirmModalCancel();">취소</button>
				</div>
			</div>
    </div>

    <div class="dimmed confirm2" @click="confirmModalCancel2();"></div>
		<div class="popup-wrap confirm2">
			<!-- 수정 확인 -->
			<div class="popup confirm2">
				<div class="pop-head">
					<h3 class="popup-tit">{{title}}</h3>
				</div>
				<div class="pop-cont">
          <p>{{ msg1 }}</p>
          <p v-if="msg2 !== ''">{{ msg2 }}</p>
          <p v-if="msg3 !== ''">{{ msg3 }}</p>
          <p v-if="msg4 !== ''">{{ msg4 }}</p>
				</div>
				<div class="popup-btn2">
					<button class="btn-pcolor" @click="confirmModalClose2();">확인</button>
					<button class="btn-default" @click="confirmModalCancel2();">취소</button>
				</div>
			</div>
    </div>
  </div>
</template>

<script>

export default {
    name: "confirm",
	data(){
        return{
		      row:{},
          title:'',
          msg1: '',
          msg2: '',
          msg3: '',
          msg4: '',
        }
    },
	methods :{
    alertModalOpen(props){
      var dimmed = document.getElementsByClassName('modal01');
      for(var i = 0; i < dimmed.length; i++){
        dimmed[i].style.display = 'block';
      }
      this.title = props.title;
      this.msg1 = props.msg1;
      this.msg2 = props.msg2;
      this.msg3 = props.msg3;
      this.msg4 = props.msg4;
    },
    alertModalClose(){
      var dimmed = document.getElementsByClassName('modal01');
      for(var i = 0; i < dimmed.length; i++){
        dimmed[i].style.display = 'none';
      }
    },
    alertModalCancel(){
      var dimmed = document.getElementsByClassName('modal01');
      for(var i = 0; i < dimmed.length; i++){
        dimmed[i].style.display = 'none';
      }
    },
        // 모달 오픈
		confirmModalOpen(props){
			var dimmed = document.getElementsByClassName('confirm');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}

      this.title = props.title;
      this.msg1 = props.msg1;
      this.msg2 = props.msg2;
      this.msg3 = props.msg3;
      this.msg4 = props.msg4;
		},
    confirmModalOpen2(props){
			var dimmed = document.getElementsByClassName('confirm2');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}

      this.title = props.title;
      this.msg1 = props.msg1;
      this.msg2 = props.msg2;
      this.msg3 = props.msg3;
      this.msg4 = props.msg4;
		},
		// 모달 끄기(ok)
		confirmModalClose(){
			var dimmed = document.getElementsByClassName('confirm');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
            
      this.row.result = true;
      // 부모 함수 호출.
      this.$parent.confirmCalbackFnc(this.row);
		},
    	// 모달 끄기(ok)
		confirmModalClose2(){
			var dimmed = document.getElementsByClassName('confirm2');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}

      this.row.result = true;
      // 부모 함수 호출.
      this.$parent.confirmCalbackFnc(this.row);
		},
        // 모달 끄기(취소)
		confirmModalCancel(){
			var dimmed = document.getElementsByClassName('confirm');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}

      this.row.result = false;
      // 부모 함수 호출.
      this.$parent.confirmCalbackFnc(this.row);
		},
        // 모달 끄기(취소)
		confirmModalCancel2(){
			var dimmed = document.getElementsByClassName('confirm2');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}

      this.row.result = false;
      // 부모 함수 호출.
      this.$parent.confirmCalbackFnc(this.row);
		},		
	}
}
</script>

<style>
    .popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
    .popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
    .popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>