Bootstrap 模态框提交表单

在模态框中使用form表单

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


<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">
            
            <div class="modal-dialog">
                
                <div class="modal-content">
                    

                    <div class="btn-info modal-header">
                        
                        <button type="button" class="close" data-dismiss="modal">×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>
            div>
        div> 
    form>
div>


<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">script>

<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

你可能感兴趣的:(jQuery,bootstrap)