bootstrap怎么弹出窗口

Posted 2023-03-04

弹出窗口，你说的应该是模态框吧。

示例代码如下：

<h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal --></div>

参考技术A 您必须引用 Jquery、Bootstrap CSS 和两个 javascript files - 一个用于 Bootstrap Tooltip（工具提示插件），一个用于 Bootstrap Popover（弹出框）。
用于 Tooltip（工具提示插件）的 JS 文件位于您的 Bootstrap 文件夹中的 js 文件夹下，名为 bootstrap-tooltip.js。用于 Popover（弹出框）的 JS 文件位于您的 Bootstrap 主文件夹中的 js 文件夹下，名为 bootstrap-popover.js。Jquery 位于您的 Bootstrap 主文件夹中的 docs > assets > js 下，名为 jquery.js。或者您可以直接访问 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。
请确保您在下载 bootstrap-popover.js 之前先下载 bootstrap-tooltip.js。弹出框依赖工具提示插件，因此需要先加载工具提示插件。