HTML bootstrap 模态对话框添加用户

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

 


__EOF__

本文作者：语 默
本文链接：https://www.cnblogs.com/weijie0717/p/13066062.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   语~默  阅读(456)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· Qt个人项目总结 —— MySQL数据库查询与断言
点击右上角即可分享
微信分享提示