How to Prevent Body Scrolling When a Modal Window Is Open?

Preventing Body Scrolling When Modal is Open

Problem Statement:

When using the Modal from http://twitter.github.com/bootstrap, the body continues to scroll when the mousewheel is used. How can we prevent this?

Attempted Solutions:

Attempts to use JavaScript to prevent scrolling using $(window).scroll and $(window).live('scroll') have been unsuccessful.

Bootstrap Support:

Bootstrap has introduced the modal-open class to the body when a modal dialog is displayed. This class can be used to prevent scrolling via CSS.

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

Current Situation (Updated 8th Feb 2013):

This solution no longer works with Twitter Bootstrap v. 2.3.0, as the modal-open class is not added to the body.

Current Workaround:

Add and remove the modal-open class to the body when the modal is displayed and hidden, respectively, using the following JavaScript:

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

Future Update (11th March 2013):

The modal-open class is expected to return in Bootstrap 3.0 with the explicit purpose of preventing scroll:

<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>

The above is the detailed content of How to Prevent Body Scrolling When a Modal Window Is Open?. For more information, please follow other related articles on the PHP Chinese website!