Comment empêcher le défilement du corps lorsqu'une fenêtre modale est ouverte ?

Empêcher le défilement du corps lorsque le modal est ouvert

Énoncé du problème :

Lors de l'utilisation du modal à partir de http://twitter.github.com/bootstrap , le corps continue de défiler lorsque la molette de la souris est utilisée. Comment pouvons-nous empêcher cela ?

Solutions tentées :

Les tentatives d'utilisation de JavaScript pour empêcher le défilement à l'aide de $(window).scroll et $(window).live('scroll') ont échoué .

Support Bootstrap :

Bootstrap a introduit la classe modal-open dans le corps lorsqu'une boîte de dialogue modale est affichée. Cette classe peut être utilisée pour empêcher le défilement via CSS.

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

Situation actuelle (mise à jour le 8 février 2013) :

Cette solution ne fonctionne plus avec Twitter Bootstrap v. 2.3.0, car la classe modal-open n'est pas ajoutée au corps.

Solution actuelle :

Ajoutez et supprimez la classe modal-open au corps lorsque le modal est affiché et masqué, respectivement, à l'aide du JavaScript suivant :

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

Future mise à jour (11 mars 2013) :

La classe modal-open devrait revenir dans Bootstrap 3.0 dans le but explicite d'empêcher le défilement :

<code class="css">/* Enable Body overflow hidden */
.modal {
    ...
    /* support for transition.* to transition .bs-modal-backdrop and .bs-modal-content */
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    /* modal container size */
    width: 560px;
    margin: 20px auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    /* background color; best with border-radius for dialog box effect */
    /* fallback for IE7-8 */
    background-color: #ffffff;
    /* IE9+ */
    background-clip: padding-box;
    /* fade in effect; (speed/timing via CSS animation) */
    opacity: 1;
 }
/* body overflow hidden */
body.modal-open {
    overflow: hidden;
}</code>

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!