web-dev-qa-db-fra.com

Rendre bootstrap modal glissable et garder l’arrière-plan utilisable

J'essaie de faire glisser un modal bootstrap n'importe où sur la page et lorsque le modal est ouvert, je veux que l'utilisateur puisse continuer à utiliser la page.

J'ai réussi à rendre le modal déplaçable avec jquery-ui mais je ne peux pas rendre la page utilisable tant que le modal est ouvert. J'ai essayé plusieurs suggestions avec CSS, mais aucune ne fonctionne aussi bien que je le souhaiterais.

Cela rend la page utilisable mais le modal est limité à une partie de la page: Bootstrap Modal - permet de cliquer sur l’arrière-plan sans fermer le modal

Identique à celui-ci: Activer l’arrière-plan à l’ouverture du popup modal bootstrap

Est-il possible d'y parvenir avec bootstrap modal?

C'est mon JS:

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

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

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

javascriptjquerycsstwitter-bootstrap
18
arie

C'est vraiment cool!

Je pense que tout ce dont vous avez besoin est un peu de css.

#myModal {
  position: relative;
}

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

Vous devez également ajouter du jQuery pour réinitialiser votre position modale en cliquant sur le bouton.

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

Découvrez le Fiddle

Note: Facebook fait maintenant quelque chose de similaire avec les vidéos de newsfeed externes. Si vous faites défiler une vidéo tout en la visionnant, cela devient une vidéo glisser-déposer.

Fondamentalement, leur conteneur vidéo popup parent est position: relative et l’enfant direct de ce conteneur est position: fixed. La même stratégie est utilisée ici.

30
Dan Kreiger