Make bootstrap modal draggable and keep background usable

Question

I'm trying to make a bootstrap modal draggable anywhere on the page and when the modal is open, I want the user to be able to continue using the page.

I was able to make the modal draggable with jquery-ui but I'm stuck on making the page usable while the modal is open. Tried several suggestions with CSS but none work quite as I'd like them to.

This makes the page usable but the modal is limited to only a part of the page: Bootstrap Modal - make background clickable without closing out modal

Same as this one: Enable background when open bootstrap modal popup

Is it possible to achieve this with bootstrap modal at all?

This is my JS:

$('#btn1').click(function() {
    var modalDiv = $('#myModal');
    modalDiv.modal({backdrop: false, show: true});

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

JSFiddle link: https://jsfiddle.net/ntLpg6hw/1/

https://jsfiddle.net/ntLpg6hw/2/, you may need to adjust some bits — Morpheus, Jul 12 '17 at 15:55
@Morpheus that makes the modal draggable only in a small part of the page, is it possible to not limit the dragging to a specific location but let the user drag it anywhere he wants? — arie, Jul 12 '17 at 15:59

score 58 · Accepted Answer · edited Jun 20 '20 at 09:12

58

This is really cool!

I think all you need is a little css.

#myModal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 10px;
}

You should also add some jQuery to reset your modal position on button click.

$('#btn1').click(function() {
  // reset modal if it isn't visible
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 0,
      left: 0
    });
  }
  $('#myModal').modal({
    backdrop: false,
    show: true
  });

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

Check out the Fiddle

Note: Facebook is now doing something similar with external newsfeed videos. If you scroll away from a video while watching it, it becomes a drag and drop video.

Basically, their video popup parent container is position: relative, and the direct child of that container is position: fixed. The same strategy is used here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 12 '17 at 16:20

Dan Kreiger

5,358
2
23
27

Great! :) I'm glad it helped – Dan Kreiger Jul 12 '17 at 17:17
Worked as expected. Thank you so much! – Gangadhar Jannu Aug 21 '17 at 07:56
Any ideas how to acchive this without jqery? – Bender Mar 22 '19 at 10:35
I tried this solution and it worked, thanks. However a problem is that when you move the modal so part of it is outside the viewport scroll bars do not appear. Probably due to the position:fixed element, but any ideas how to fix so scroll bars will appear? – buddyroo30 Jan 22 '20 at 21:45
1

Dragging is working but the issue is it lags. my modal container very much Big Form with many input fields and other data. and it lags when dragging. i want it to move with same speed as mouse. – Najam Us Saqib Oct 23 '20 at 05:18
The background interactivity is limited to button clicks and links , like you showed in your demo. But if there are any text boxes or select boxes , you can' type or select there. – Rpant Dec 08 '21 at 21:05
@NajamUsSaqib Any solution to the lagging? – user2402616 Dec 14 '21 at 17:13
@user2402616 there was a solution, I did something but i don't remember it now :D. sorry. – Najam Us Saqib Dec 15 '21 at 07:25
It's now working for me, do I need to include the library for Jquery? – John Emmanuel Dela Cruz Mar 30 '23 at 03:49

Make bootstrap modal draggable and keep background usable

1 Answers1

Linked