Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Draggable Bootstrap Modal
$('.modal.draggable>.modal-dialog').draggable({
cursor: 'move',
handle: '.modal-header'
});
$('.modal.draggable>.modal-dialog>.modal-content>.modal-header').css('cursor', 'move');
  1. requires jquery.js and jquery.ui.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
  1. add class draggable to modal container.
<div class="modal draggable fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">...</div>
            <div class="modal-body">...</div>
            <div class="modal-footer">...</div>
        </div>
    </div>
</div>
@nathanielstenzel

This comment has been minimized.

Copy link

nathanielstenzel commented Jan 16, 2016

Thanks so much for posting this! A project I got involved in lately had some weird bug where dragging the window would drag the parent window's scroll bar. This fixed it!

@ghost

This comment has been minimized.

Copy link

ghost commented Jan 16, 2016

Thanks from me too! Saved github.com/openhardwarecoza/LaserWeb (: from the scrollbar dragging with the modal. @nathanielstenzel sent me the pull and I merged it this morning.

Laserweb is a node.js based, in browser CAM/Machine control for Laser Cutters

@cannandev

This comment has been minimized.

Copy link

cannandev commented Feb 29, 2016

Exactly what I was looking for. Thanks!

@SlyNet

This comment has been minimized.

Copy link

SlyNet commented Oct 12, 2016

Is it possible to make it non modal? Thanks.

@Jonas92

This comment has been minimized.

Copy link

Jonas92 commented Nov 23, 2016

Exactly what i needed! It was so helpful!!

Thanks!!

@constantinokv

This comment has been minimized.

Copy link

constantinokv commented May 29, 2018

Thanks very much, it's just I need and helpful!. 💯

@dhanilkumart

This comment has been minimized.

Copy link

dhanilkumart commented Jul 6, 2018

The modal is scrolling above the window, once it moved under browser bar we have to refresh the page. How can i fix it?? prevent dragging out a parent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.