본문 바로가기

modal2

Bootstrap Modal 창 드래그하는 3가지 방법 (Javascript, jQuery, jQuery UI) Bootstrap Modal 창의 헤드를 클릭 드래그해서 움직이게 하는 3가지 방법에 대해서 알려 드립니다. Bootstrap의 Modal에 기본적으로 들어 있지 않은 기능으로 따로 구현해야 하는 기능이기 때문에 이를 구현하는 방법에 대해서 알려 드립니다. 기능 구현은 아래의 3가지 방법으로 구현을 할 것이며, 가장 쉬운 방법부터 소개해 드리겠습니다. 원하시는 방법을 선택 후 사용하시기 바랍니다. jQuery와 jQuery UI를 이용하는 방법 jQuery만 이용하는 방법 순수 Javascript로 구현하는 방법 그럼, 진행을 시작하겠습니다. HTML 삽입 미리보기할 수 없는 소스 1. jQuery와 jQuery UI를 이용하는 방법 "jQuery"와 "jQuery UI"를 라이브러리를 사용하도록 선언합.. 2023. 4. 5.
Bootstrap v5에서 Modal창 드래그하기 Bootstrap v5에서 모달창의 헤더를 마우스로 클릭 후 드래그 해서 움직이게 하는 방법에 대해서 포스팅 진행하겠습니다. BS5에서는 jQuery를 다 들어냈으므로, 순수 자바스크립트로 구현하는 방법으로 진행해 보겠습니다. jQuery로 구현하는 방법은 아래의 링크를 참고하시기 바랍니다. Bootstrap 모달창 드래그 Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다. jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다. 아래는 stackoverflow 참고 사이트 주소입니다. 참고 자료: s ccusean.tistory.com HTML 소스 수정 아래는 BS5의 버튼을 눌러서 모달창을 띄우는 기본 소스입니다. 여기에 모달창을 드.. 2023. 3. 23.
반응형