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. 在PHP中如何为匿名函数指定this？

    在之前的文章中,我们已经学习过匿名函数的使用,没有看过的小伙伴可以进入传送门先去了解下闭包匿名函数的用法,传送:还不知道PHP有闭包?那你真OUT了. 关于闭包匿名函数,在JS中有个很典型的问题就是要 ...

  2. Orchard Core入门配方和主题

    包含Orchard Core入门配方和主题 可以通过两个不同的NuGet包使用Orchard Core. OrchardCore.Application.Cms.Core.Targets Orchar ...

  3. [转载]用redis实现跨服务器session

    地址:http://blog.chinaunix.net/uid-11121450-id-3284875.html 这个月我们新开发了一个项目,由于使用到了4台机器做web,使用dns做负载均衡, 上 ...

  4. 使用 Vue 脚手架，为什么要学 webpack？

    先问大家一个很简单的问题: vue init webpack prjectName 与 vue create projectName 有什么区别呢? 它们是 Vue-cli 2 和 Vue-cli3 ...

  5. java 请求第三方接口 GET\POST 实现方法

    (1)GET方法 /** * 根据高德地图api获取位置信息 * @return * */ public static String getMapAddInfo(String httpurl) { H ...

  6. 数值计算：Legendre多项式

    Legendre多项式的概念以及正交特性在此不多作描述,可以参考数学物理方程相关教材,本文主要讨论在数值计算中对于Legendre多项式以及其导数的计算方法. Legendre多项式的计算 递推公式 ...

  7. CentOS7下Hadoop伪分布式环境搭建

    CentOS7下Hadoop伪分布式环境搭建 前期准备 1.配置hostname(可选,了解) 在CentOS中,有三种定义的主机名:静态的(static),瞬态的(transient),和灵活的(p ...

  8. 洛谷4400 BlueMary的旅行（分层图+最大流）

    qwq 首先,我们观察到题目中提到的每天只能乘坐一次航班的限制,很容易想到建分层图,也就是通过枚举天数,然后每天加入一层新的点. (然而我一开始想的却是erf) 考虑从小到大枚举天数,然后每次新建一层 ...

  9. Java读取属性配置文件-properties

    在项目开发中,我们难免将一些可变的参数放在程序以外,作为一个单独的文件,即配置文件,这样方便项目在不同的使用环境部署时.或者说需要不同时,可以通过简单配置这些程序以外的文件来修改程序里的变量. 常用的 ...

  10. 实战-快手H5字体反爬

    实战-快手H5字体反爬 前言 快手H5端的粉丝数是字体反爬,抓到的html文本是乱码 <SPAN STYLE='FONT-FAMILY: kwaiFont;'></SPA ...