[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>
时间: 2024-10-10 21:43:40

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

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

bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a> 使用脚本模式: $("#modal").modal({ remote: "tieniu.php" }); 没有给出任何实例,这种用

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

关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就行 如果弹出模态框的使用场景没有嵌套在iframe或frame中掌握以上两点加上点css功底就可以写出漂亮的模态框了 特殊场景会涉及到跨域问题,可以在父页面和子页面分别设置<script type="text/javascript">document.domain="

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

什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个.还有后台的数据库连接,一般都是保证一个连接等等.今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来. 我们先看下普通的构造函数加原型方式.下面这种是常见的方式 1 function Singleton

后台添加代码的方式模态框的方法

以添加含有帮助的方式为例: 1,在某DIV后面增加代码: $("#ListBoxControl1_1772158006").after(function() { return "<div id='firstmodal' class='modal container fade' role='dialog' tabindex='-1' style='display: none;'><div class='modal-header'><button t

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

这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js). 不要将两份文件全部引入 bootstrap.js和bootstrap.min.js同样是包含了所有插件.区别是:一个没有压缩,一个进行了压缩. 插件之间的依赖 某些插件和CSS组件依赖于其

模态框(layer)

推荐一个好看的模态框(layer)   地址:http://layer.layui.com/ 相应列子及配置  全部来自于官网,可直接访问官网学习了解. //信息框-例1 layer.alert('见到你真的很高兴', {icon: 6}); //信息框-例2 layer.msg('你确定你很帅么?', { time: 0 //不自动关闭 ,btn: ['必须啊', '丑到爆'] ,yes: function(index){ layer.close(index); layer.msg('雅蠛蝶

bootstarp 模态框大小尺寸的控制

默认: <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog">

jQuery点击弹出层,弹出模态框,点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla