[모달창] 부트스트랩 사용해서 구현하기

목적 : 부트스트랩으로 모달창 이쁘게 구현하기

 

코드 : 

<template>

<div class="container">

  <!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

  글쓰기

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

       

        <select class="form-select" style="width:40%;" >

        <option value="1" selected >공통</option>  

        </select>

       

 

     

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

       

        <!-- <input   type="file"   accept=".png,.Png,.jpg,.JPG,"    /> -->

       

     

        <textarea class="form-control" placeholder="제목" style="height: 25px;" id="floatingTextarea"></textarea>

        <label for="floatingTextarea">  </label>

        <textarea class="form-control" placeholder="본문" style="height: 150px" id="floatingTextarea"></textarea>

       

     

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" >임시저장</button>

        <button type="button" class="btn btn-primary">완료</button>

      </div>

    </div>

  </div>

  </div>

</div>

</template>

<script lang="ts" setup></script>

<style scoped></style>

실행 화면 :