jquery弹窗时禁止body滚动条滚动的例子-前端开发

请参考以下攻略，包含两个示例说明。

请参考以下攻略，包含两个示例说明。

攻略

当使用jQuery弹出框或模态框时，为了确保用户集中精力处理弹出框中的信息，我们通常要禁止页面的滚动。

一种简单的解决方法是通过禁止body元素的滚动来实现。我们可以使用CSS和JavaScript来实现这一目的。

示例如下：

1. CSS方式：

/* 禁止body元素滚动 */ 
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

但是，如果没有触发条件，这段CSS无效。我们需要在JavaScript中切换“modal-open”类来实现这一目的。

2. JavaScript方式：

我们可以在打开模态框时添加CSS类，关闭时则删除。示例代码如下：

// 打开模态框时
$('myModal').on('show.bs.modal', function () {
    $('body').addClass('modal-open');
});

// 关闭模态框时
$('myModal').on('hidden.bs.modal', function () {
    $('body').removeClass('modal-open');
});

上述代码中，‘show.bs.modal’和‘hidden.bs.modal’是Bootstrap模态框的事件钩子，分别在模态框显示和隐藏时触发。

示例说明

假设我们有一个网站，包含一个回到顶部按钮。用户点击该按钮后，弹出一个询问窗口，询问用户是否确认返回顶部操作。当弹窗显示时，我们需要禁止页面滚动。

以下是一个示例代码：

<!-- HTML代码 -->
<button id="back-to-top">回到顶部</button>

<div id="confirm-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>确认返回顶部吗？</p>
            </div>
            <div class="modal-footer">
                <button id="confirm-btn" type="button" class="btn btn-primary">确认</button>
                <button id="cancel-btn" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

// JavaScript代码
$(function () {
    // 回到顶部按钮点击事件
    $('#back-to-top').click(function () {
        // 显示确认窗口
        $('#confirm-modal').modal('show');
        // 禁止页面滚动
        $('body').addClass('modal-open');
    });

    // 确认按钮点击事件
    $('#confirm-btn').click(function () {
        // 隐藏确认窗口
        $('#confirm-modal').modal('hide');
        // 取消禁止页面滚动
        $('body').removeClass('modal-open');
        // 返回顶部
        $('html, body').animate({ scrollTop: 0 }, 'fast');
    });

    // 取消按钮点击事件
    $('#cancel-btn').click(function () {
        // 隐藏确认窗口
        $('#confirm-modal').modal('hide');
        // 取消禁止页面滚动
        $('body').removeClass('modal-open');
    });
});

以上代码中，我们首先在回到顶部按钮的点击事件中，显示弹出框并禁止页面滚动。然后在确认或取消按钮的点击事件中，隐藏弹出框并恢复页面滚动。

另外一个示例中，我们有一个照片展示网站，当用户点击照片时，会弹出一个大图展示。与上面的示例类似，当弹出窗口显示时，我们需要禁止页面滚动。

以下是一个示例代码：

<!-- HTML代码 -->
<div class="photo-gallery">
    <img src="photo1.jpg" alt="照片1" data-toggle="modal" data-target="#photo-modal">
    <img src="photo2.jpg" alt="照片2" data-toggle="modal" data-target="#photo-modal">
    <img src="photo3.jpg" alt="照片3" data-toggle="modal" data-target="#photo-modal">
    <img src="photo4.jpg" alt="照片4" data-toggle="modal" data-target="#photo-modal">
    <!-- 省略其它照片 -->
</div>

<div id="photo-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="photo1.jpg" alt="照片1">
            </div>
            <div class="modal-footer">
                <button id="close-btn" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

// JavaScript代码
$(function () {
    // 点击照片时
    $('.photo-gallery img').click(function () {
        // 获取照片的地址
        var src = $(this).attr('src');
        // 设置弹出窗口中的照片地址
        $('#photo-modal img').attr('src', src);
        // 显示弹出窗口
        $('#photo-modal').modal('show');
        // 禁止页面滚动
        $('body').addClass('modal-open');
    });

    // 关闭按钮点击事件
    $('#close-btn').click(function () {
        // 隐藏弹出窗口
        $('#photo-modal').modal('hide');
        // 取消禁止页面滚动
        $('body').removeClass('modal-open');
    });
});

以上代码中，我们在照片的点击事件中，从点击的img元素中获取照片地址并设置弹出窗口中的照片地址。然后显示弹出窗口并禁止页面滚动。在关闭按钮的点击事件中，隐藏弹出窗口并取消禁止页面滚动。

这两个示例说明了如何使用jQuery实现弹窗时禁止页面滚动的功能。