美文网首页
动态弹窗

动态弹窗

作者: RobertLiu123 | 来源:发表于2019-07-18 09:12 被阅读0次
    <!DOCTYPE html>
    <html>
       <head>
        <meta charset="UTF-8">
        <!-- IE将使用最新的引擎渲染网页 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 页面的宽度与设备屏幕的宽度一致
             初始缩放比例 1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    
    <link href="css/bootstrap.css" rel="stylesheet"/>
    
    <!--导入bootstrap.js包-->
    <script src="jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $("#s").click(function(){
                $("#myModal").modal();
            });
            $("#btn_submit").click(function(){
                $.ajax({
                    url:"testServlet",
                    type:"get",
                    data:{
                        msg:123
                    }
                });
            });
        });
    </script>
       </head>
       <body>
        <input type="button" id="s">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增</h4>
                    </div>
                    <div class="modal-body">
    
                        <div class="form-group">
                            <label for="txt_departmentname">部门名称</label>
                            <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
                        </div>
                        <div class="form-group">
                            <label for="txt_parentdepartment">上级部门</label>
                            <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
                        </div>
                        <div class="form-group">
                            <label for="txt_departmentlevel">部门级别</label>
                            <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
                        </div>
                        <div class="form-group">
                            <label for="txt_statu">描述</label>
                            <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                        <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                    </div>
                </div>
            </div>
        </div>
    
       </body>
    </html>
    

    相关文章

      网友评论

          本文标题:动态弹窗

          本文链接:https://www.haomeiwen.com/subject/usazkctx.html