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; 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