Make bootstrap modal draggable and keep background usable

arie :

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/

Dan Kreiger :

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Bootstrap modal: background jumps to top on toggle

Bootstrap modal appearing under background

Trying to make bootstrap modal wider

BootStrap Modal background scroll on iOS

Bootstrap 3 modal: make it movable/draggable without jquery-ui

Jquery draggable with bootstrap modal, scroller strange behaviour

How can i apply a draggable directive to bootstrap modal using angularJS?

Bootstrap 3 modal background is missing

Bootstrap modal background won't disappear

Bootstrap Modal - make background clickable without closing out modal

How to generate a Twitter Bootstrap modal but keep it hidden

Background image in bootstrap modal

Bootstrap modal enable background

Enable background use with modal open in Bootstrap 4

background pixels flickering on bootstrap modal

Bootstrap 4 how to make modal that doesn't block or affect background and scrolling

how to make bootstrap modal draggable and scrollable on android device

Bootstrap 4 Modal Background not responsive on mobile

How to ignore SwiftUI modal background, or make modal background clear/transparent?

How to make a draggable background image with background-position and percentage values?

Modal under background fade bootstrap

Bootstrap modal lightbox showing scrollbar background

Not able to change the background color of bootstrap modal

bootstrap modal background black

My Bootstrap modal is not draggable?

Bootstrap modal with opacity appearing behind the background

How to make bootstrap dropdown draggable?

Bootstrap modal displays grey background

How to change background color of react bootstrap modal