正文

学会Bootstrap：轻松打造带子界面的弹出框技巧

/0 浏览量
0520

在网页设计中，弹出框（Modal）是一种非常常见且实用的交互元素。它可以帮助用户在不离开当前页面内容的情况下，查看或输入信息。Bootstrap 作为全球最受欢迎的前端框架之一，提供了强大的模态框组件，使得创建带子界面的弹出框变得简单快捷。下面，我将详细讲解如何使用 Bootstrap 打造这样的弹出框。

基础结构

首先，我们需要确保你的 HTML 文档中已经包含了 Bootstrap 的 CSS 和 JS 文件。你可以在 Bootstrap 官网下载这些文件，或者使用 CDN 链接。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 弹出框示例</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<!-- 你的内容 -->

<!-- Bootstrap JS 和依赖的 jQuery & Popper.js -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

创建模态框

接下来，我们将创建一个基本的模态框结构。

<!-- 模态框（Modal） -->
<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>
            <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>

激活模态框

为了使模态框在页面加载时显示，我们需要在某个按钮上添加一个触发模态框的类，并在对应的 JS 代码中调用 $('#myModal').modal('show');。

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

$(document).ready(function(){
    $('#myModal').modal('show');
});

带子界面的弹出框

为了创建一个带子界面的弹出框，我们可以在模态框的内部添加另一个模态框。

<!-- 子模态框 -->
<div class="modal fade" id="myModalChild" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <!-- ...子模态框的内部结构... -->
</div>

然后，在父模态框的 modal-body 中添加一个触发子模态框的按钮。

<!-- 触发子模态框的按钮 -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#myModalChild">
    打开子模态框
</button>

最后，在子模态框的 JS 代码中激活模态框。

$(document).ready(function(){
    $('#myModalChild').on('show.bs.modal', function (e) {
        $('#myModal').modal('hide');
    });
});

通过以上步骤，你就可以使用 Bootstrap 轻松打造一个带子界面的弹出框了。当然，Bootstrap 还提供了许多其他的配置选项和功能，你可以根据自己的需求进行调整和优化。希望这篇文章能够帮助你更好地掌握 Bootstrap 弹出框的使用技巧。

-- 展开阅读全文 --