HTML

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Bootstrap 实例 - 模态框(Modal)插件</title>
6 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
7 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
8 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
9 </head>
10 <body>
11 <div>
12 <form action="{% url 'sw_mgmt:new_init' %}" method="post">
13 {% csrf_token %}
14 <!-- 按钮:用于打开模态框 -->
15 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
16 添加新脚本
17 </button>
18 <!-- 模态框 -->
19 <div class="modal fade" id="myModal">
20 <div class="modal-dialog modal-lg">
21 <div class="modal-content">
22 <!-- 模态框头部 -->
23 <div class="modal-header">
24 <h4 class="modal-title" id="myModalLabel">
25 添加新脚本
26 </h4>
27 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
28 ×
29 </button>
30 </div>
31 <!-- 模态框主体 -->
32 <div class="modal-body">
33 <div>
34 <label for="id_brand">品&nbsp;&nbsp; 牌:</label>
35 <select name="brand" required id="id_brand">
36 <option value="" selected>请选择品牌</option>
37 <option value="0">CISCO</option>
38 <option value="1">H3C</option>
39 <option value="2">锐捷</option>
40 <option value="3">华为</option>
41 <option value="4">博科</option>
42 </select>
43 </div><br>
44 <div>
45 <label for="id_sw_model">型 &nbsp;&nbsp;号:</label>
46 <input type="text" name="sw_model" maxlength="150" autofocus required id="id_sw_model" placeholder="请输入交换机型号">
47 </div><br>
48 <div>
49 <label style="vertical-align: top;" for="id_commands">命令集:</label>
50 <textarea style="overflow-y: auto; width:650px;height: 500px;" name="commands" autofocus required id="id_commands" placeholder="请输入初始化命令集"></textarea>
51 </div>
52 </div>
53 <!-- 模态框底部 -->
54 <div class="modal-footer">
55 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
56 <button type="submit" class="btn btn-primary" value="提交">提交</button>
57 </div>
58 </div>
59 </div>
60 </div>
61 </form>
62 </div><br>
63 </body>
64 </html>
65

HTML bootstrap 模态对话框添加用户的更多相关文章

  1. 为Bootstrap模态对话框添加拖拽移动功能

    请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

  2. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  3. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  4. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  5. bootstrap模态对话框(最简单)

    根据公司的需求,需要一个对话框来返回给客户的失败原因,刚刚开在百度上搜了老半天,嫩是没有搜索一个自己想要的,后来发送私信给一个博友,经过他哪里找到了自己想要的答案,废话不多说直接看源码: <!D ...

  6. Bootstrap 模态对话框 remote指定内容加载

    第一个页面: .....其他内容..... <div class="modal" id="ID_ReformDetail"> <div cla ...

  7. Bootstrap 模态对话框只加载一次 remote 数据的解决办法

    原文: https://my.oschina.net/qczhang/blog/190215?p=1

  8. python Django html 一对多数据实例 模态对话框添加数据

  9. Bootstrap 避免模态框在用户点击背景空白处时,会自动关闭。

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

随机推荐

  1. 启动docker: Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock

    启动docker提示: docker: Got permission denied while trying to connect to the Docker daemon socket at uni ...

  2. AT2368-[AGC013B]Hamiltonish Path【构造】

    正题 题目链接:https://www.luogu.com.cn/problem/AT2368 题目大意 给出 \(n\) 个点 \(m\) 条边的一张无向图,然后求一条路径满足 路径长度不小于二. ...

  3. YbtOJ#752-最优分组【笛卡尔树,线段树】

    正题 题目链接:http://www.ybtoj.com.cn/problem/752 题目大意 \(n\)个人,每个人有\(c_i\)和\(d_i\)分别表示这个人所在的队伍的最少/最多人数. 然后 ...

  4. SVN--代码状态检查(图文并茂)

    接下来,我们用客户端去检出代码,在桌面空白处单击右键,选择SVN检出(check out),在弹出的对话框中填写版本库URL(具体获取方式,上面讲上传项目到版本库的时候讲过),选择检出目录,点击确定. ...

  5. Python代码阅读(第10篇):随机打乱列表元素

    本篇阅读的代码实现了随机打乱列表元素的功能,将原有列表乱序排列,并返回一个新的列表(不改变原有列表的顺序). 本篇阅读的代码片段来自于30-seconds-of-python. shuffle fro ...

  6. MyBatis 批量插入数据的 3 种方法!

    批量插入功能是我们日常工作中比较常见的业务功能之一,之前我也写过一篇关于<MyBatis Plus 批量数据插入功能,yyds!>的文章,但评论区的反馈不是很好,主要有两个问题:第一,对 ...

  7. Python - __all__ 变量

    import * 当我们向文件导入某个模块时,导入的是该模块中那些名称不以下划线(单下划线 _ 或者双下划线 __ )开头的变量.函数和类 因此,如果不想模块文件中的某个对象被引入到其它文件中使用,可 ...

  8. 使用node-gyp编写简单的node原生模块

    通过样例,让我们了解如何编写一个node的原生模块.当然,这篇文章还有一个目的,是为了方便以后编写关于node-gyp的文章,搭建初始环境. 基于node-addon-api 基于node-addon ...

  9. IL合集

    由于之前写的表达式树合集,未编写任何注释且是以图片的形式展现给大家,在这里向各位看官道歉了,接下来为大家奉上新鲜出炉的香喷喷的IL合集,后面会持续更新,各位看官点关注不迷路,之前答应的手写IOC以及多 ...

  10. dev分支和release是什么

    master(主分支) 存在一条主分支(master).所有用户可见的正式版本,都从master发布(也是用于部署生产环境的分支,确保master分支稳定性).主分支作为稳定的唯一代码库,不做任何开发 ...