污染Bootstrap modal 通过 css选择器 避免
w
对框架的掌握、改进。
0-存在重复代码，需要改正,js timepicker框架传入类名；
1-大量的点击块，怎样避免对每个块重复写modal？
<style>
.w > td {
width: 24.6px;
background-color: #fff;
overflow: hidden;
font-size: 80%;
word-wrap: break-word;
padding:;
} #w, #w + tr, .w > td {
border: 1px solid #000000;
}
</style>
<div class="modal fade" id="ww8301" tabindex="-1" role="dialog"
aria-labelledby="wtw8301"
aria-hidden="true">
<div class="modal-dialog">
<form method="post" action="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="wtw8301">
会议室预订
</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>会议日期</td>
<td id="wdw8301"><input class="form-control jqueryui-datepicker"
type="text" name="wd"
Tid="jqueryui-datepickerw8301"
value="w"
disabled="true">
</td>
</tr>
<tr>
<td>会议室名称</td>
<td id="wrw8301"><input class="form-control" type="text"
id="wrw8301"
value="room1"
disabled="true"> <input type="hidden" name="wrid" value="1">
</td>
</tr>
<tr>
<td>会议主题</td>
<td><input class="form-control" type="text" name="wtheme"
id="wtw8301">
</td>
</tr>
<tr>
<td class="">开始时间</td>
<td><input class="form-control" id="jq_timepickerw8301s"
type="text"
name="wts"
value="8:30">
</td>
</tr>
<tr>
<td>结束时间</td> <td><input class="form-control" id="jq_timepickerw8301e"
type="text"
name="wte">
</td>
</tr>
<tr>
<td>预定人</td>
<td><input class="form-control" type="text" id="wuw8301"
value="all" disabled="true">
</tr>
</table>
<script>
$('#jq_timepickerw8301s').timepicker({
'minTime': '8:00am',
'maxTime': '9:00pm',
'showDuration': false,
'step': 30
});
$('#jq_timepickerw8301e').timepicker({
'minTime': '8:00am',
'maxTime': '9:00pm',
'showDuration': false,
'step': 30
});
$(function () {
$("#jqueryui-datepickerw8301").datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消
</button>
<button type="submit" class="btn btn-primary" name="wsu" id="wow8301">
提交预订
</button>
</div>
</div>
</form>
</div>
</div>
<table id="w" style="table-layout:fixed;margin-top: -10px;;margin-left: 14px;;Twidth: 933px;;margin-top: 20px;">
<tr class="w">
<td style="width: 98px;"> wroom01</td>
<td style="width: 146px;">w1</td>
<td id="w8001" data-toggle="modal" data-target="#ww8001"><br><br><br></td>
<td id="w8301" data-toggle="modal" data-target="#ww8301"><br><br><br></td>
<td id="w9001" data-toggle="modal" data-target="#ww9001"><br><br><br></td>
<td id="w9301" data-toggle="modal" data-target="#ww9301"><br><br><br></td>
<td id="w10001" data-toggle="modal" data-target="#ww10001"><br><br><br></td>
<td id="w10301" data-toggle="modal" data-target="#ww10301"><br><br><br></td>
<td id="w11001" data-toggle="modal" data-target="#ww11001"><br><br><br></td>
<td id="w11301" data-toggle="modal" data-target="#ww11301"><br><br><br></td>
<td id="w12001" data-toggle="modal" data-target="#ww12001"><br><br><br></td>
<td id="w12301" data-toggle="modal" data-target="#ww12301"><br><br><br></td>
<td id="w13001" data-toggle="modal" data-target="#ww13001"><br><br><br></td>
<td id="w13301" data-toggle="modal" data-target="#ww13301"><br><br><br></td>
<td id="w14001" data-toggle="modal" data-target="#ww14001"><br><br><br></td>
<td id="w14301" data-toggle="modal" data-target="#ww14301"><br><br><br></td>
<td id="w15001" data-toggle="modal" data-target="#ww15001"><br><br><br></td>
<td id="w15301" data-toggle="modal" data-target="#ww15301"><br><br><br></td>
<td id="w16001" data-toggle="modal" data-target="#ww16001"><br><br><br></td>
<td id="w16301" data-toggle="modal" data-target="#ww16301"><br><br><br></td>
<td id="w17001" data-toggle="modal" data-target="#ww17001"><br><br><br></td>
<td id="w17301" data-toggle="modal" data-target="#ww17301"><br><br><br></td>
<td id="w18001" data-toggle="modal" data-target="#ww18001"><br><br><br></td>
<td id="w18301" data-toggle="modal" data-target="#ww18301"><br><br><br></td>
<td id="w19001" data-toggle="modal" data-target="#ww19001"><br><br><br></td>
<td id="w19301" data-toggle="modal" data-target="#ww19301"><br><br><br></td>
<td id="w20001" data-toggle="modal" data-target="#ww20001"><br><br><br></td>
<td id="w20301" data-toggle="modal" data-target="#ww20301"><br><br><br></td>
</tr>
<tr class="w">
<td style="width: 98px;"> wroom02</td>
<td style="width: 146px;">w2</td>
<td id="w8002" data-toggle="modal" data-target="#ww8002"><br><br><br></td>
<td id="w8302" data-toggle="modal" data-target="#ww8302"><br><br><br></td>
<td id="w9002" data-toggle="modal" data-target="#ww9002"><br><br><br></td>
<td id="w9302" data-toggle="modal" data-target="#ww9302"><br><br><br></td>
<td id="w10002" data-toggle="modal" data-target="#ww10002"><br><br><br></td>
<td id="w10302" data-toggle="modal" data-target="#ww10302"><br><br><br></td>
<td id="w11002" data-toggle="modal" data-target="#ww11002"><br><br><br></td>
<td id="w11302" data-toggle="modal" data-target="#ww11302"><br><br><br></td>
<td id="w12002" data-toggle="modal" data-target="#ww12002"><br><br><br></td>
<td id="w12302" data-toggle="modal" data-target="#ww12302"><br><br><br></td>
<td id="w13002" data-toggle="modal" data-target="#ww13002"><br><br><br></td>
<td id="w13302" data-toggle="modal" data-target="#ww13302"><br><br><br></td>
<td id="w14002" data-toggle="modal" data-target="#ww14002"><br><br><br></td>
<td id="w14302" data-toggle="modal" data-target="#ww14302"><br><br><br></td>
<td id="w15002" data-toggle="modal" data-target="#ww15002"><br><br><br></td>
<td id="w15302" data-toggle="modal" data-target="#ww15302"><br><br><br></td>
<td id="w16002" data-toggle="modal" data-target="#ww16002"><br><br><br></td>
<td id="w16302" data-toggle="modal" data-target="#ww16302"><br><br><br></td>
<td id="w17002" data-toggle="modal" data-target="#ww17002"><br><br><br></td>
<td id="w17302" data-toggle="modal" data-target="#ww17302"><br><br><br></td>
<td id="w18002" data-toggle="modal" data-target="#ww18002"><br><br><br></td>
<td id="w18302" data-toggle="modal" data-target="#ww18302"><br><br><br></td>
<td id="w19002" data-toggle="modal" data-target="#ww19002"><br><br><br></td>
<td id="w19302" data-toggle="modal" data-target="#ww19302"><br><br><br></td>
<td style="background-color: #FF6600" id="w20002">all<br><br><br> <form method="POST" action="">
<button type="submit" class=" " name="del" value="142" style="float:right;">×</button>
</form>
</td>
<td style="background-color: #FF6600" id="w20302" data-toggle="modal" data-target="#ww20302"><br><br><br></td>
</tr>
<tr class="w">
<td style="width: 98px;"> wroom03</td>
<td style="width: 146px;">w3</td>
<td id="w8003" data-toggle="modal" data-target="#ww8003"><br><br><br></td>
<td id="w8303" data-toggle="modal" data-target="#ww8303"><br><br><br></td>
<td id="w9003" data-toggle="modal" data-target="#ww9003"><br><br><br></td>
<td id="w9303" data-toggle="modal" data-target="#ww9303"><br><br><br></td>
<td id="w10003" data-toggle="modal" data-target="#ww10003"><br><br><br></td>
<td id="w10303" data-toggle="modal" data-target="#ww10303"><br><br><br></td>
<td id="w11003" data-toggle="modal" data-target="#ww11003"><br><br><br></td>
<td id="w11303" data-toggle="modal" data-target="#ww11303"><br><br><br></td>
<td id="w12003" data-toggle="modal" data-target="#ww12003"><br><br><br></td>
<td id="w12303" data-toggle="modal" data-target="#ww12303"><br><br><br></td>
<td id="w13003" data-toggle="modal" data-target="#ww13003"><br><br><br></td>
<td id="w13303" data-toggle="modal" data-target="#ww13303"><br><br><br></td>
<td id="w14003" data-toggle="modal" data-target="#ww14003"><br><br><br></td>
<td id="w14303" data-toggle="modal" data-target="#ww14303"><br><br><br></td>
<td id="w15003" data-toggle="modal" data-target="#ww15003"><br><br><br></td>
<td id="w15303" data-toggle="modal" data-target="#ww15303"><br><br><br></td>
<td id="w16003" data-toggle="modal" data-target="#ww16003"><br><br><br></td>
<td id="w16303" data-toggle="modal" data-target="#ww16303"><br><br><br></td>
<td id="w17003" data-toggle="modal" data-target="#ww17003"><br><br><br></td>
<td id="w17303" data-toggle="modal" data-target="#ww17303"><br><br><br></td>
<td id="w18003" data-toggle="modal" data-target="#ww18003"><br><br><br></td>
<td id="w18303" data-toggle="modal" data-target="#ww18303"><br><br><br></td>
<td id="w19003" data-toggle="modal" data-target="#ww19003"><br><br><br></td>
<td id="w19303" data-toggle="modal" data-target="#ww19303"><br><br><br></td>
<td id="w20003" data-toggle="modal" data-target="#ww20003"><br><br><br></td>
<td id="w20303" data-toggle="modal" data-target="#ww20303"><br><br><br></td>
</tr>
</table>
污染Bootstrap modal 通过 css选择器 避免的更多相关文章
- 从覆盖bootstrap样式谈css选择器优先级
样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...
- Bootstrap Modal 垂直方向加滚动条
原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...
- Bootstrap<基础一> CSS 概览
HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...
- 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧
CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...
- Bootstrap modal垂直居中
Bootstrap modal垂直居中 在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- CSS选择器、优先级与匹配原理
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...
- Bootstrap的优先级、选择器、伪类
概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理.由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点. 一.优先级 之前我们使 ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
随机推荐
- jquery 对table的一些操作 怎么获取tr下的第二个td元素？
1.HTML结构 <table id = "test"> <tr><td>1</td><td>1</td>& ...
- 一款基于jQuery的带文字标题上下切换焦点图
今天给大家分享一款很实用的jQuery焦点图插件,它的最大特点就是使用非常方便,而且实现相对比较简单.焦点图的图片下方悬浮文字链接,鼠标滑过文字时即可切换至相应的图片,在图片切换的过程中出现淡入淡出的 ...
- OpenGL ES 简单教程
什么是OpenGL ES? OpenGL ES (为OpenGL for Embedded System的缩写) 为适用于嵌入式系统的一个免费二维和三维图形库. 为桌面版本号OpenGL 的一个子集. ...
- 虚拟机和Docker的异同
[摘要]各种虚拟机技术开启了云计算时代:而Docker,作为下一代虚拟化技术,正在改变我们开发.测试.部署应用的方式.那虚拟机与Docker究竟有何不同呢? 首先,大家需要明确一点,Docker容器不 ...
- SSIS 自测题-文件操作类
说明:以下是自己的理解答案,不是标准的答案,如有不妥烦请指出. 有些题目暂时没有答案,有知道的请留言,互相学习,一起进步. 1.什么是控制流,什么是数据流,控制流和数据流之间的关系是什 ...
- Update 语句用于修改表中的数据。
语法: UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值
- (转)内核container_of(ptr,type,member) 解析
container_of(ptr,type,member) 用于在已知结构体里面成员member和该成员指针ptr(就是地址)和结构体类型type, 返回该成员所在的结构体的指针(就是地址), 例如 ...
- Amazon Web Services (目录)
一.官方声明 AWS云全球服务基础设施区域列表 AWS产品定价国外区 AWS产品定价中国区 (注意!需要登陆账户才能查看) AWS产品费用预算 AWS区域和终端节点 二.计算 Amazon学习:如何启 ...
- 复习及总结--.Net线程篇（4）
这里要说的就是多线程的锁的问题了 锁:作用在于实现线程间的同步问题,最典型的是售票问题 1,InterLocked 提供的都是静态方法,用来同步对多个共享变量的访问,包括以原子方式递增,递减,比较和替 ...
- IOS 开发之 -- 获取本机通讯录里面所有的联系人，并传到后台
项目中遇到一个需求,就是需要在入口的时候,获取通讯录的权限,并把所有的联系人,以接口参数的形式传到后台,通过网上查资料,历时3个小时,终于完成, 话不多,直接上代码: 1,导入系统库 #import ...