[bootstrap4] modal 모달창 띄우기 예제

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
 
<a href="#" data-toggle="modal" data-target="#myModal">이미지 모달띄우기</a>
 
 
<div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">사진제목</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
            <img class="card-img-top rounded img-fluid" src="images/research/research-1.jpg">
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
</div>

 

data-backdrop="static" 속성은 모달창 주의의 검은 배경을 클릭하여도 창이 닫히지 않는다.

data-keyboard="false" 옵션은 esc 키를 눌러도 창을 닫지 않게 해준다.

 

modal-dialog-centered 속성은 모달창 내용이 화면 중앙으로 나오도록,

data-dismiss="modal" 속성은 모달창을 닫을 수 있게 해준다.