Comment empêcher le défilement du corps lors de l'utilisation d'un modal dans Bootstrap ?

Empêcher le défilement du corps pendant l'affichage modal

Lorsque vous utilisez le modal du framework Bootstrap de Twitter, vous pouvez rencontrer un problème où le défilement du corps continue lorsque le la boîte de dialogue modale est ouverte. Cela peut être frustrant pour les utilisateurs.

Solution

Bootstrap ajoute automatiquement une classe, "modal-open", au corps lorsqu'un modal est affiché. Vous pouvez utiliser cette fonctionnalité en ajoutant une règle CSS à votre feuille de style :

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

Cela empêchera le défilement du corps lorsque le modal est ouvert.

Considérations sur la version Bootstrap

Notez que cette solution a des limitations en fonction de votre version de Bootstrap.

• Bootstrap 2.3.0 et versions ultérieures : Twitter Bootstrap a supprimé le paramètre "modal-open " classe du corps dans cette version.

  • Solution de contournement : Vous pouvez ajouter la classe manuellement lorsque le modal s'ouvre et la supprimer lorsqu'il se ferme. Ceci peut être réalisé en utilisant jQuery comme suit :

  <code class="js">$("#myModal").on("show", function () {
      $("body").addClass("modal-open");
  }).on("hidden", function () {
      $("body").removeClass("modal-open")
  });</code>

• Bootstrap 3.0 : La classe "modal-open" devrait revenir explicitement dans la version 3.0 pour le dans le but d'empêcher le défilement.

Compatibilité IE

Notez que la solution est compatible avec IE7, comme vous l'avez mentionné.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!