最常见的页面交互体验就是点击按钮,弹出对应的form表单,下面就来介绍下如何实现

Bootstrap 有一种自带插件, 叫 模态框(Modal)插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 模态框(Modal)插件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
        <button class="btn btn-primary" data-toggle="modal" data-target="#addcase">添加用例</button>
                        <a class="" data-toggle="modal" data-target="#addcase">添加用例</a>

                        {#   添加弹出框 #}
                        <div id="addcase" class="modal inmodal" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog">
                                <form action="{{ url_for("case_app.case_add") }}" role="form" method="post" >
                                    <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">添加用例</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label for="InputCode">字段</label>
                                                <input type="text" class="form-control" name="a" placeholder="Model Code">
                                            </div>
                                            <div class="form-group">
                                                <label for="InputCode">字段</label>
                                                <input type="text" class="form-control" name="a" placeholder="Model Code">
                                            </div>
                                            <div class="form-group">
                                                <label for="InputCode">字段</label>
                                                <input type="text" class="form-control" name="a" placeholder="Model Code">
                                            </div>
                                            <div class="form-group">
                                                <label for="InputCode">字段</label>
                                                <input type="text" class="form-control" name="a" placeholder="Model Code">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                                                <button type="submit" class="btn btn-primary">提交</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                            <!-- /.modal -->
                        </div>


</body>
</html>

相关介绍

在模态框中需要注意两点:

    第一是 .modal,用来把 <div> 的内容识别为模态框。
    第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。

aria-labelledby="myModalLabel",该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
<div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。
class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口

发表评论

共有 0 条评论