본문 바로가기

HTML & CSS & JS

javascript modal control

반응형
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle" style="font-weight: bold;">Complete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

modal source에서 

<button id="completeBtn" class="btn btn-md btn-dark" style="width:100%">complete</button>
$('#completeBtn').click(function(){
	$('#exampleModalLong').modal('show');
});

button toggle제거하고 jquery로 해결

반응형

'HTML & CSS & JS' 카테고리의 다른 글

datatable maintain scroll  (0) 2021.08.02
dataTable scroll  (0) 2021.07.02
jquery checkbox  (0) 2021.07.01
thymeleaf th:id  (0) 2021.07.01
thymeleaf version update  (0) 2021.06.30