Bootstrap 模态框提交表单

来源：互联网发布：p2p网络借贷暂行办法编辑：程序博客网时间：2024/06/10 23:47

在模态框中使用form表单

之前在写项目的时候用到过模态框，当时一知半解就用了网上现成的，现在又学习Bootstrap菜鸟教程，对模态框有了更深的理解。我此次把表单加入模态框，代码很简单，必要的地方都做了注释。需要的CSS、jQuery和JS我也使用了CDN的链接，复制后可以直接运行看效果。之后也会在这个代码上进行改进，例如把内容添加为登录注册的范本，还可以加上切换tab。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>模态框</title>    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/></head><body><div class="container">    <h3>创建模态框（Modal）</h3>    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button>    <!--  定义模态框触发器，此处为按钮触发  -->    <form method="post" action="#" class="form-horizontal" role="form" id="myForm" onsubmit="return ">        <div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">            <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->            <div class="modal-dialog">                <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->                <div class="modal-content">                    <!--  显示模态框白色背景，所有内容都写在这个div里面  -->                    <div class="btn-info modal-header">                        <!--  模态框标题  -->                        <button type="button" class="close" data-dismiss="modal">&times;</button>                        <!--  关闭按钮  -->                        <h4>您好，欢迎进入模态框</h4>                        <!--  标题内容  -->                    </div>                    <div class="modal-body">                        <!--  模态框内容，我在此处添加一个表单 -->                        <form class="form-horizontal" role="form">                            <div class="form-group">                                <label for="uname" class="col-sm-2 control-label">用户名</label>                                <div class="col-sm-9">                                    <input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/>                                </div>                            </div>                            <div class="form-group">                                <label for="upwd" class="col-sm-2 control-label">密码</label>                                <div class="col-sm-9">                                    <input type="password" id="upwd" name="upwd" class="form-control well" placeholder="请输入密码"/>                                </div>                            </div>                        </form>                    </div>                    <div class="modal-footer">                        <!--  模态框底部样式，一般是提交或者确定按钮 -->                        <button type="submit" class="btn btn-info">确定</button>                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>                    </div>                </div><!-- /.modal-content -->            </div>        </div> <!-- /.modal -->    </form></div><!-- Bootstrap的所有插件都依赖于jQuery，必须在引入bootstrap.min.js前引入jQuery --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 压缩版的bootstrap.min.js包含了所有的Bootstrap数据API插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>

参考网站

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
https://segmentfault.com/a/1190000007651357

阅读全文

2 0