make bootstrap twitter dialog modal draggable

Question

I\'m trying to make bootstrap twitter dialog modal draggable with this jquery plugin:

http://threedubmedia.com/code/event/drag#demos

but it doesn\'t work.

<

Answer 1

In my own case, i had to set backdrop and set the top and left properties before i could apply draggable function on the modal dialog. Maybe it might help someone ;)

if (!($('.modal.in').length)) {       
$('.modal-dialog').css({
     top: 0,
     left: 0
   });
}
$('#myModal').modal({
  backdrop: false,
   show: true
});

$('.modal-dialog').draggable({
  handle: ".modal-header"
});

Answer 2

use the jquery UI draggable, much simpler http://jqueryui.com/draggable/

Answer 3

Like others said, the simpliest solution is just call draggable() function from jQuery UI just after showing modal:

$('#my-modal').modal('show')
              .draggable({ handle: ".modal-header" });

But there is a several problems with compatibility between Bootstrap and jQuery UI so we need some addition fixes in css:

.modal
{
    overflow: hidden;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}
.modal-header{      /* not necessary but imo important for user */
    cursor: move;
}