HTML bootstrap 模态对话框添加用户
2024-09-02 08:07:56
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">品 牌:</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">型 号:</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
最新文章
- （转）Web性能优化方案
- 关于HTML5与移动开发
- HashSet和LinkedHashSet特点.
- zz 如何在Linux下创建与解压zip, tar, tar.gz和tar.bz2文件
- L013-oldboy-mysql-dba-lesson13
- Delphi 中的DLL 封装和调用对象技术（刘艺，有截图）
- string下的 maketrans和translate
- 《程序员的职业素养》【PDF】下载
- zookeeper 实现分布式锁zookeeper 使用 Curator 示例监听、分布式锁
- react源码总览(翻译)
- MySQL 权限相关
- React 入门学习笔记整理（二）—— JSX简介与语法
- window如何安装redis服务、卸载redis服务和启动redis服务
- 【DB2】设置表不记录日志，但是回滚导致表不可用报错：DB2 SQL Error: SQLCODE=-1477, SQLSTATE=55019, SQLERRMC=LEN.TMP;5;3, DRIVER=3.57.82
- 【java】 java设计模式(3):单例模式（Singleton）
- 机器学习算法中GBDT和XGBOOST的区别有哪些
- NuGet文件下载与应用
- C 实现有追求的线程池 探究
- 阿里云ECS下基于Centos7.4安装MySQL5.7.20
- [bzoj1798][Ahoi2009]Seq——线段树+多重标记下传