bootstrap入门【模态框】

最新推荐文章于 2025-06-22 10:34:51 发布

原创最新推荐文章于 2025-06-22 10:34:51 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文介绍了一种模态对话框的实现方式，并提供了基于Bootstrap框架的HTML代码示例。模态对话框是一种阻止用户与应用其他部分交互直至对话框关闭的UI元素。本文通过实例展示了如何设置模态对话框的基本结构，包括头部、主体和底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。

用起来还是有些复杂，仍然是分为头部，身体，脚部三个部分，添加了很多标签。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery-2.1.3.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
    <div class="modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="true">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="mymodallabel">modal title</h4>
            </div>
            <div class="modal-body">
                content
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">save</button>
            </div>
        </div>
    </div>
    <script>
        $("#mymodal").modal("show");
    </script>
</body>
</html>