부트스트랩 모달버튼

유비빅·2021년 6월 7일
0

📕

목록 보기
2/3

📑 Modal Button 설정해보자

  • 꼭 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');
			});

0개의 댓글