美文网首页
动态弹窗

动态弹窗

作者: 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>

相关文章

  • 动态弹窗

  • 12-jQuery编写弹窗

    动态创建 弹窗布局: 点击按钮, 动态生成 居中显示 滚动的时候还是居中 关闭

  • 拦截动态创建A标签的弹窗跳转

    1、拦截动态创建A标签进行的跳转 通常大部分站点会通过动态创建A标签来实现弹窗跳转链接,以绕过浏览器的一些弹窗拦截...

  • 点击按钮切换不同形状

    方法一:需要设计的点: 1、点击张三,弹窗到蓝色,李四弹窗到红色,王二弹窗到绿色 需要涉及到的组件:矩形+动态面板...

  • video_mask组件

    视频弹窗组件 功能:动态加载弹窗并播放video兼容性: pc、ipad、iphone、大部分安卓(目前未检测到不...

  • Layui如何动态加载下拉框

    实现效果如下所示: 弹窗代码 动态加载下拉框代码 关键代码:

  • 修改

    缺少训练营列表“微课+”标签设计 推荐返现弹窗上缺少描述文字 打卡动态缺少“成员”、“组长”标记 发布动态页面点击...

  • 巨头与资本轮番搏杀,短视频何以如此火热?

    “朋友的新动态”是春节期间微信端口悬浮在最顶端的一个“弹窗”。其实,“朋友的新动态”是朋友圈短视频的推荐功能,只要...

  • uniapp 常用弹窗

    action-sheet 弹窗 alert 弹窗 confirm 弹窗 loading 弹窗 toast 弹窗

  • Android6.0动态申请权限(流程图及demo)

    在Api 23中, 权限需要动态获取, 核心权限必须满足. 标准流程: 如果用户点击, 不再提示, 则系统授权弹窗...

网友评论

      本文标题:动态弹窗

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