📌  相关文章
📜  BS 模态滚动长内容 (1)

📅  最后修改于: 2023-12-03 14:39:35.813000             🧑  作者: Mango

BS 模态滚动长内容

Bootstrap（简称BS）是一套用于开发移动设备优先的响应式前端开源工具包。其中常用的组件包括模态框（Modal），在这里我们介绍一下如何使用BS模态框实现滚动长内容。

实现方式

在BS中，模态框的内容主体写在一个类为modal-content的 <div> 中，但是问题来了，如果模态框中的内容过多，在模态框小于内容高度时，会出现模态框无法滑动的情况。为了解决这个问题，我们可以在modal-body中再套一个div来进行滚动处理。

<div class="modal-body">
    <div class="scroll-container">
        <!-- 长内容 -->
    </div>
</div>

这里自定义了一个名为scroll-container的 div，它的css如下：

.scroll-container {
    max-height: 300px;   /*最大高度*/
    overflow-y: scroll;  /*Y轴方向滚动*/
}

当模态框的高度小于内容高度时，scroll-container的最大高度可以控制模态框中可见的最大内容高度，overflow-y属性可以控制Y轴方向滚动。

下面是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BS 模态框滚动长内容</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
        .scroll-container {
            max-height: 300px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        打开模态框
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">
                        模态框标题
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="scroll-container">
                        <p>这里是长内容……</p>
                        <p>这里是长内容……</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
结束语

使用上述css和HTML代码，我们可以实现BS模态框的滚动长内容效果。此外，在使用BS时，还有许多组件和样式可供使用，大大简化了开发人员的工作。