본문 바로가기
프로그래밍/HTML

Bootstrap 모달창 드래그

by 꾸션 2020. 11. 5.

Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다.

jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다.

 

Bootstrap 모달창 화면

 

아래는 stackoverflow 참고 사이트 주소입니다.

참고 자료: stackoverflow.com/questions/46192427/how-to-do-draggable-bootstrap-modal

 

핵심 코드

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   
<script>
  $(function () {
    $('.modal-dialog').draggable({
      handle: ".modal-header"
    });
  });
</script>

 

 

 

Bootstrap Modal 창 드래그하는 3가지 방법 (Javascript, jQuery, jQuery UI)

Bootstrap Modal 창의 헤드를 클릭 드래그해서 움직이게 하는 3가지 방법에 대해서 알려 드립니다. Bootstrap의 Modal에 기본적으로 들어 있지 않은 기능으로 따로 구현해야 하는 기능이기 때문에 이를

ccusean.tistory.com

반응형

댓글