모달 샘플

<button type="button" class="krds-btn large open-modal" data-target="modal_sample_01">class 및 data-target 호출</button>

<section id="modal_sample_01" class="krds-modal fade in shown" role="dialog" aria-labelledby="tit_modal_sample_01">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="modal-header">
				<h2 id="tit_modal_sample_01" class="modal-title">
					모달 제목
				</h2>
			</div>
			
			
			<div class="modal-conts">
				<div class="conts-area">
					대화 상자는 사용자에게 작업에 대해 알리고 중요한 정보를 포함하거나 결정이 필요하거나 여러 작업을 포함할 수 있습니다.
				</div>
			</div>
			
			
			<div class="modal-btn btn-wrap">
				<button type="button" class="krds-btn medium tertiary close-modal">아니요</button>
				<button type="button" class="krds-btn medium primary close-modal">예</button>
			</div>
			
			
			<button type="button" class="krds-btn medium icon btn-close close-modal">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-popup-close"></i>
			</button>
			
		</div>
	</div>
	<div class="modal-back in"></div>
</section>

<template>
  <button type="button" class="krds-btn large open-modal" data-target="modal_sample_01">class 및 data-target 호출</button>

<section id="modal_sample_01" class="krds-modal fade in shown" role="dialog" aria-labelledby="tit_modal_sample_01">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="modal-header">
				<h2 id="tit_modal_sample_01" class="modal-title">
					모달 제목
				</h2>
			</div>
			
			
			<div class="modal-conts">
				<div class="conts-area">
					대화 상자는 사용자에게 작업에 대해 알리고 중요한 정보를 포함하거나 결정이 필요하거나 여러 작업을 포함할 수 있습니다.
				</div>
			</div>
			
			
			<div class="modal-btn btn-wrap">
				<button type="button" class="krds-btn medium tertiary close-modal">아니요</button>
				<button type="button" class="krds-btn medium primary close-modal">예</button>
			</div>
			
			
			<button type="button" class="krds-btn medium icon btn-close close-modal">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-popup-close"></i>
			</button>
			
		</div>
	</div>
	<div class="modal-back in"></div>
</section>
</template>

<script setup lang="ts">
// 모달 샘플 컴포넌트
// 다양한 모달 예제입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>