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

[bootsrap]模态框使用例的更多相关文章

  1. bootstrap模态框远程加载网页的正确处理方式

    bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...

  2. HTMLCSS--案例| 超链接美化 | 模态框 | tab栏选项卡

    一.超链接美化 二.模态框 三.tab栏选项卡 -------------------------------------------- 一.超链接美化 <!DOCTYPE html> & ...

  3. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

  4. JavaScript插件——模态框

    Bootstrap3.0学习第十七轮(JavaScript插件——模态框)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  5. iframe中的模态框遮罩父窗口原理

    关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...

  6. [js高手之路]设计模式系列课程-单例模式实现模态框

    什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...

  7. angularjs 给封装的模态框元素传值,和实现兄弟传值

    本例实现封装的元素所放的位置不同,而选择不同的传值,这里举例封装了bootstrap模态框,以后也方便大家去直接使用.方法举例如下:首先主页调用css/js有: <link rel=" ...

  8. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  9. bootstrap中的模态框(modal,弹出层)

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

随机推荐

  1. Python flask 基于 Flask 提供 RESTful Web 服务

    转载自 http://python.jobbole.com/87118/ 什么是 REST REST 全称是 Representational State Transfer,翻译成中文是『表现层状态转 ...

  2. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  3. OC语言类的本质和分类

    OC语言类的深入和分类 一.分类 (一)分类的基本知识  概念:Category  分类是OC特有的语言,依赖于类. 分类的作用:在不改变原来的类内容的基础上,为类增加一些方法. 添加一个分类: 文件 ...

  4. JS常用小技巧

    iframe子窗口调用父窗口方法 parent.functionName(); 二.iframe 父窗口和子窗口相互的调用方法 1.IE中使用方法: 父窗口调用子窗口:iframe_ID.iframe ...

  5. Java开发手冊 Java学习手冊教程(MtJava开发手冊)

    本文档的版权归MtJava文档小组全部,本文档及其描写叙述的内容受有关法律的版权保护,对本文档内容的不论什么形式的非法复制.泄露或散布.将导致对应的法律责任. MtJava仅仅是一个学习Java的简化 ...

  6. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  7. bzoj2658: [Zjoi2012]小蓝的好友(mrx)

    太神辣 treap的随机键值竟然能派上用场.. 要用不旋转的treap来进行维护区间信息 #include<cstdio> #include<cstring> #include ...

  8. ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能

    首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/ 第一步是点击这里 第二步选择你想要下载的主题进行下载 我这里是选择的cupertino主题包 点击圆圈 ...

  9. hyperLink的定制

    在iReport中增加hyperLink,点击之后没有反应:需要重新写一遍net.sf.jasperreports.view.JRViewer; 修改其中的gotoHyperlink方法: case ...

  10. solr服务器搭建与Tomact整合及使用

    一:solr服务器的搭建 1:搭建全新的为solr专用的solr服务器: 在自己电脑上搭建两台Tomact服务器,一台仍为应用服务器,一台作为solr服务器,应用服务器按照正常Tomact服务器搭建即 ...