๐ฆ MODAL
<span class="followerCnt" data-bs-toggle="modal" data-bs-target="#followModal">ํ๋ก์ : </span>
<span class="followerCnt" th:text="${profile.users_follower_count}" data-bs-toggle="modal" data-bs-target="#followModal"></span>
<span class="followCnt" data-bs-toggle="modal" data-bs-target="#followModal">ํ๋ก์ฐ : </span>
<span class="followCnt" th:text="${profile.users_follow_count}" data-bs-toggle="modal" data-bs-target="#followModal"></span>
<div class="modal" id="followModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modalList">
<p>12345678</p>
</div>
</div>
</div>
</div>
โ
<div class="modal" id="followModal" tabindex="-1">
์ด๋
โ
๋๋ฅด๋ฉด ๋ชจ๋ฌ ํ์ด๋์์ผ ํ๋ ๊ณณ์ด๋ ์ฐ๊ฒฐํด์ค์ผ ํ๋ค.
โ
data-bs-toggle="modal" data-bs-target="#followModal"
๐ฆ MODAL
- ๋์๊ฒ ๋ง๊ฒ
- ์๋ ์์ค๋ฅผ ๋ ์ฐ๋ฉด ๋๋ค.
<div class="modal fade" tabindex="-1" id="12345678">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">12345678</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modalList">
<p>12345678</p>
</div>
</div>
</div>
</div>
<div class="modal" id="mypageDetailModal" tabindex="-1">
์ด๋
- ๋๋ฅด๋ฉด ๋ชจ๋ฌ ํ์ด๋์์ผ ํ๋ ๊ณณ์ด๋ ์ฐ๊ฒฐํด์ค์ผ ํ๋ค.
data-bs-toggle="modal" data-bs-target="#mypageDetailModal"
๐ฆ ๋ชจ๋ฌ + ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ + grid
+ overflow
+ table
+ floating lables
<div class="modal fade" tabindex="-1" id="mypageDetailModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content container">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body row row-cols-2 " id="modalList">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators" id="imgBtnDiv">
</div>
<div class="carousel-inner" id="imgDiv">
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div id="favCmtDiv">
<div class="overflow-auto table-responsive">
<table class="table align-middle table-borderless table-hover" id="cmtDiv">
</table>
</div>
<div id="icnDiv"></div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="๋ด ์๊ฐ์....">
<label for="floatingInput">๋๊ธ ์ฐ๊ธฐ</label>
<button type="button" class="btn btn-primary" id="cntBtn"><i class="bi bi-vector-pen"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
๐ฆ display: none
visually-hidden
์ ์จ์ผํ๋ค.
elem.classList.add('visually-hidden')
๐ฆ ๊ฐ๋ก์์ญ ๋ค ์ฐจ์งํ๊ธฐ , flex
์ทจ์ํ๊ธฐ
- ํ๊ทธ์ ์ง์ ์ ์ผ๋ก
style
์์ฑ์ ์ค์ ํด์ผ ํ๋ค.
- ๊ฐ๋ก์์ญ์ ๋ค ์ฐจ์งํ๋
display
์ ์์ฑ์ block
์ด๋ค.
<div class="modal-footer" style="display: block">
๐ฆ ์คํฌ๋กค
- ๊ผญ ์คํฌ๋กค์ด ์์ด์ผ ํ๋ ๊ณณ์
max-height
์ด ์์ด์ผ ํ๋ค. ์๊ทธ๋ผ ์๋ํ์ง ์๋๋ค
<div class="overflow-auto" style="max-height: 500px">