[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