污染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: 0;
        }

        #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">
                        &times;
                    </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;">&times;</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>

时间： 2024-12-17 09:53:21

污染Bootstrap modal 通过 css选择器 避免的相关文章

这 30 类 CSS 选择器，你必须理解！

CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了很多新的选择器,使得选择元素更加便捷,所以必须理解这些选择器,只有先理解了,多用几次,自然而然就记住了. 1.* [CSS2] 通配符,选择页面所有元素. 1 *{ 2 margin:0; 3 padding:0; 4 } 上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 

bootstrap modal垂直居中

使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢? 当然网上一些前辈也给出了不少答案, 感觉不太全而且针对的都是各自的项目难以给我等小白太直观的理解.因而手痒试试写个稍微完整点的解决方案, 作为总结及日后回顾之用. 项目中的bootstrap版本是3.X , 作为项目后台使用. 在项目进行过程中遇到组件弹出框无法垂直居中,示例demo代码如下: <!DOCTYPE html> <html> <head> <

bootstrap modal 模态框拖拽扩展

主管要求bootstrap modal 带有拖拽移动效果.代码如下: JS 1 // bootstrap 模态框窗口 移动扩展, 在bootstrap 初始化后 调用 2 var btModalMoveEx = function () { 3 function moveEx($this) { 4 var $head = $this.find(".modal-header"), $dialog = $this.find(".modal-dialog"); 5 var

bootstrap 2 基本css之栅格系统

一:12格结构 二: <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-xs-4"> <h2 class="page-header">区域一</h2> <p>Bootstrap has a few easy ways to

Bootstrap的优先级和选择器

概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理.由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点. 一.优先级 之前我们使用CSS的时候知道样式有三种,分别是行内样式.内嵌样式.外部样式,它们的优先级是 行内>内嵌>外部. OK,现在我们将Bootstarp的优先级,如何确定CSS的优先级?这里我们要先引入一个机制,分别用4个数字(a,b,c,d)表示优先级组合, 比如1,1,1,1和0,1,0,1.它们的意思分别是

Bootstrap modal常用参数、方法和事件

Bootstrap modal(模态窗)常用参数.方法和事件: 参数: 名称 类型 默认值 描述 Backdrop Boolean或字符串"static" True True:有背景,点击modal外部,modal消失. False:无背景,点击modal外部,modal不消失. Static:有背景,点击modal外部,modal不消失. Keyboard Boolean True True:键盘上的esc按下关闭modal False:键盘上的esc按下不关闭modal Show

bootstrap modal 垂直居中对齐

bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/JavaScript/#modals Html代码   <div class="modal fade" id="sqh_model"> <div class="modal-dialog"> <div class="mod

对bootstrap modal的简单扩展封装

对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间一直在学习bootstrap,主要是用于做后台,一直习惯用easyui,ui,jgrid前端框架,以至于并不习惯bootstrap的风格.近来考虑到easyui性能不太好,就用了bootstrap,先说下我所了解的bootstrap. 1.外国的框架用于显示中文看着总是不妥. 2.默认的样式觉得有些

Vue中引入bootstrap导致的CSS问题

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.