- 꼭 button에 넣지 않아도 된다
- span에 넣고 icon을 설정해주었다 화면에 맞는 css를 명시해주었다
- x 버튼으로 끌 수 있게 설정하기 때문에 따로 확인이나 취소 버튼을 빼두었다.
<span data-toggle="modal" data-target="#myModal"
style="position: relative; z-index: 2; left: 56%; margin-top: 1%; color: azure;" !important>
<i class="fa fa-map fa-5x"></i></span>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="left: 32%; top: 8%;">
<div class="modal-content">
<div class="modal-header">
<ul>
<h4> PS(Permanent Scatterer)-InSAR</h4>
</ul>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size: 5.0rem;">×</span></button>
</div>
<div class="modal-body">
<ul class="text-left lead mb-5">
<li style="font-size: 1.3rem; text-align: center;">
<span style="font-size: 1.2rem; text-align: center;"> 제목</li>
<li style="font-size: 1.3rem; text-align: center;">
<span style="font-size: 1.2rem; text-align: center;">내용~</li>
<li style="font-size: 1.3rem; text-align: center;">
<span style="font-size: 1.2rem; text-align: center;">~~~</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" th:inline="javascript">
$('#openModalBtn').on('click', function () {
$('#modalBox').modal('show');
});
$('#closeModalBtn').on('click', function () {
$('#modalBox').modal('hide');
});