[bootsrap]模态框使用例

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a>
<div id="modal1" class="modal hide fade">
                                 <div class="modal-header">
                                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                   <h3>合同添加界面</h3>
                               </div>
                               <div class="modal-body">
                                   <form class="form-horizontal" id="form1">
                              {% csrf_token %}
                                   <div class="control-group">
                                       <label class="control-label">合同编码:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill1" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9">
                                         <span class="text-error">限数字,字母</span>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合同名称:</label>
                                       <div class="controls"><textarea rows="8" class="form-control" id="bill2"></textarea></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">是否续签:</label>
                                       <div class="controls">
                                           <select class="form-control input-mini" placeholder=".input-mini" id="bill3">
                                <option>是</option>
                                <option>否</option>
                              </select>
                            </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">原合同编码:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill4" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9">
                                         <span class="text-error">限数字,字母</span>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合同类型:</label>
                                       <div class="controls">
                                           <select class="form-control input-small" placeholder=".input-small" id="bill5">
                                <option>光纤</option>
                                <option>交叉</option>
                                <option>团购</option>
                              </select>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合帐缴费号码:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill6" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
                                         <span class="text-error">限数字</span>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">缴费合帐号:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill7" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
                                         <span class="text-error">限数字</span>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">座机数量:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill8" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">座机费用:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill9" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注一:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill10"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">光纤一:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill11"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">纤一费用:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill12"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注二:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill13"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">光纤二:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill14"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">光纤二费用:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill15"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注三:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill16"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">手机数量:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill17"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">手机费用:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill18"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注四:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill19"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他数量一:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill20"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他费用一:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill21"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注五:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill22"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他数量二:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill23"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他费用二:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill24"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注六:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill25"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他数量三:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill26"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他费用三:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill27"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注七:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill28"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他数量四:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill29"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">其他费用四:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill30"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">备注八:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill31"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">优惠前费用:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill32"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">优惠后费用:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill33"></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">费用处理方式:</label>
                                       <div class="controls">
                                           <select class="form-control input-small" placeholder=".input-small" id="bill34">
                                <option>合帐</option>
                                <option>分摊</option>
                                <option>手工</option>
                              </select>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合同年限:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill35"><span></span></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合同生效时间:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill36"><span class="text-error">格式:20160101</span></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合同失效时间:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill37"><span class="text-error">格式:20160101</span></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">合同签订日期:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill38"><span class="text-error">格式:20160101</span></div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">经办人:</label>
                                       <div class="controls">
                                           <input type="text" class="form-control" id="bill39" onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">出费类型:</label>
                                       <div class="controls">
                                           <select class="form-control input-small" placeholder=".input-small" id="bill40">
                                <option>固定收费</option>
                                <option>按时收费</option>
                              </select>
                                       </div>
                                   </div>
                                   <div class="control-group">
                                       <label class="control-label">佣金发放:</label>
                                       <div class="controls"><input type="text" class="form-control" id="bill41"></div>
                                   </div>
                                   <div class="control-group"><div class="controls"><button id="bill_add" type="button" class="btn btn-primary btn-sm">提交</button></div></div>
                                   </form>                                        
                               </div>
                             </div>