Bootstrap之模态框（提示框）_模态提示框完成-CSDN博客

本文链接：https://blog.csdn.net/yy228313/article/details/50763048

1 效果图

Bootstrap的模态框可以用作，操作的提示、表单弹出窗口等。

2 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模态框测试</title>
    <script src="../../Scripts/jquery-2.2.0.js" type="text/javascript"></script>
    <script src="../../Scripts/bootstrap.js" type="text/javascript"></script>
    <link href="../../Styles/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!--
        data-toggle:触发器
        data-target:目标
    -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        模态框测试
    </button>

    <!--
        tabindex:设置键盘中TAB键在控件中的移动顺序，即焦点的顺序，默认为0，-1表示此元素被忽略。
    -->
    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog" ><!-- 模块会话 -->
            <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">模块标题</h4>
                </div>
                <div class="modal-body">
                    <p>内容主体</p>
                </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><!-- /.model-content -->
        </div><!-- /.model-dialog -->
    </div><!-- /.modal -->
</body>
</html>

以上代码由两部分组成：

按钮：data-toggle和data-target属性是必备属性，前者声明了按钮的类型，后者什么了对应的模块（即模态框）。

模态框：div的嵌套为

modal--》modal-dialog--》modal-content--》modal-header（存放标题）、modal-body（存放内容）、modal-footer（存放按钮）。

3 使用

在实际使用中，如果是作为提示框使用，应将模态框部分放在一个公共的页面中。不同的提示只需修改modal-body中的内容，而不需要写多个模态款（表单的除外）。

js控制

function hintModal(bodyTest) {
            console.info("执行方法");
            $("#hintModalBody").html(bodyTest);
            $("#hintModal").modal('show');
        }