优秀的编程知识分享平台

网站首页 > 技术文章 正文

Bootstrap第十二天学习（bootstrap基础教程）

nanyue 2024-09-06 20:14:35 技术文章 8 ℃ 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模态框</title>
        <link rel="stylesheet" type="text/css" 
            href="bootstrap/css/bootstrap.min.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!--
            1.通过data属性:
                  在控制器元素(比如按钮或链接)上设置属性data-toggle="modal",
                  同时设置data-target="#identifier" 或 href="#identifier",
                  来指定要切换的特定的模态框
            2.通过Javasrcipt：
                  使用这种技术，可以通过Javascript来调用带有id="identifier"的
                  模态框
                  打开模态框:$('#identifier').modal('show')
                  关闭模态框:$('#identifier').modal('hide')
        -->

        <!--通过 data 属性-->
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal_01">打开模态框</button>
        <!--通过Javascript-->
        <button class="btn btn-primary" id="btn_01">打开模态框</button>
        <!--模态框Modal-->
        <div class="modal fade" id="modal_01" tabindex="-1" role="dialog" aria-labelledby="modal_01_label"
            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">×</button>
                        <h4 class="modal-title" id="modal_01_label">
                            添加用户
                        </h4>
                    </div>

                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="uname" class="col-md-2 control-label">姓名</label>
                                <div class="col-md-8">
                                    <input type="text" id="uname" class="form-control" placeholder="请输入姓名"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="upwd" class="col-md-2 control-label">密码</label>
                                <div class="col-md-8">
                                    <input type="password" id="upwd" class="form-control" placeholder="请输入密码"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
                    </div>
                </div>
             </div>
        </div>

        <script>
            // 绑定按钮的点击事件
            $("#btn_01").click(function(){
                //手动打开模态框
                $("#modal_01").modal("show");
            });

            //关闭模态框
            $("#submit_btn").click(function(){
                $("#modal_01").modal("hide");
            });
        </script>
    </body>
</html>

Tags：

猜你喜欢

最近发表
标签列表