Сделать загрузочный модальный перетаскиваемый и сохранить фон полезной

Я пытаюсь сделать загрузочный модальный перетаскиваемый в любом месте страницы, и когда модальная функция открыта, я хочу, чтобы пользователь мог продолжить использовать эту страницу.

Я смог сделать modal draggable с jquery-ui, но я застрял на том, чтобы сделать страницу полезной, пока модальная открыта. Пробовал несколько предложений с помощью CSS, но никто не работает так, как мне бы хотелось.

Это делает страницу полезной, но модальная ограничивается только частью страницы: Bootstrap Modal - делает фоновой кликабель без закрытия модального

То же, что и этот: включить фон, когда открытое всплывающее всплывающее окно начальной загрузки

Можно ли добиться этого с помощью bootstrap modal?

Это мой JS:

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

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

Ссылка JSFiddle: https://jsfiddle.net/ntLpg6hw/1/

Ответы

Ответ 1

Это действительно здорово!

Я думаю, что все, что вам нужно, это немного css.

#myModal {
  position: relative;
}

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

Вы также должны добавить jQuery для сброса своей модальной позиции при нажатии кнопки.

$('#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"
  });
});

Проверьте скрипт

Примечание. Facebook теперь делает что-то подобное с внешними новостными видеороликами. Если вы просматриваете видеоролик во время просмотра, оно становится перетаскиванием видео.

В основном, их родительский контейнер видеопотока является position: relative, а прямой дочерний элемент этого контейнера имеет position: fixed. Здесь используется та же стратегия.