div模态层示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
    <title>任务量分配 </title>
</head>
<body style="border-width: 0px; padding: 0px; margin: 0px; padding-top: 0px; height: 100%;
    position: relative;">
    <div style="padding: 0px; margin: 0px; border-width: 0px; overflow: auto; position: absolute;
        left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 0;">
        <form name="form1" method="post" id="form1" style="margin-left: 10px;">
        <div>
            <table style="width: 100%; border: 1px solid #B5CAE3; background-color: #DCECF4;
                height: 40px; width: 800px;">
                <tr>
                    <td>
                        <table style="display: inline-block;">
                            <tr>
                                <td style="width: 50px; text-align: right;">
                                    考试<span style="color: red;">*</span>
                                </td>
                                <td>
                                    <select name="ddlGrade" onchange="javascript:setTimeout(‘__doPostBack(\‘ddlGrade\‘,\‘\‘)‘, 0)"
                                        id="ddlGrade">
                                    </select>
                                </td>
                                <td style="width: 40px; text-align: right;">
                                    科目<span style="color: red;">*</span>
                                </td>
                                <td>
                                    <select name="ddlCourse" id="ddlCourse">
                                        <option value="010101003716010518010003">语文</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                        <table style="display: inline-block; margin-left: 10px;">
                            <tr>
                                <td id="btnSearchContainer" style="padding-left: 10px;">
                                    <input type="submit" name="btnSearch" value="查询" id="btnSearch" class="butn" />
                                </td>
                                <td id="btnAvgAssignContainer" style="padding-left: 10px;">
                                    <input type="submit" name="btnAvgAssign" value="平均分配" id="btnAvgAssign" class="butn" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </div>
    <div style="padding: 0px; margin: 0px; border-width: 0px; position: absolute; left: 0px;
        top: 0px; right: 0px; bottom: 0px; z-index: 1; display: table-cell; filter: alpha(opacity=5);
        opacity: 0.05; background-color: White;">
    </div>
    <div style="padding: 0px; margin: 0px; border-width: 0px; position: absolute; left: 0px;
        top: 0px; right: 0px; bottom: 0px; z-index: 2; display: table-cell;">
        hello
    </div>
</body>
</html>
时间: 2024-10-05 10:47:58

div模态层示例的相关文章

为NProgress增加模态层,更完美的应用于复杂网页的细长进度条

NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube.我是在用github时发现这一特性的,就想应用到我的网站上,经过层层筛选找到了NProgress,感觉非常棒,另外我又为NProgress添加了模态层,因为我不希望一个请求响应未结束前,当前页面再去请求服务. 一.组件下载 官网http://ricostacruz.com/nprogress/ 也可以看到演示效果,我就不再贴我网站的效果图了,就是多了一层模态. 二.应用

js+css实现模态层效果

在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路,希望对大家有用.先贴效果吧: 模态层效果 下面说说在写模态层的时候的思路:通过可配置的参数width,height,title以及content用来设定弹出的信息框显示的内容,并通过可配置参数container用来设定模态层显示的区域.思路很简单,主要是一些css样式和js处理,详见源码: modal.css html,body{ font-size: 12px; font-family: "微软雅黑"; } .mod

openlayers入门开发系列之地图模态层篇

本篇的重点内容是为了到达自己想要的区域高亮效果,利用openlayers结合turf.js实现地图模态层功能,效果图如下: 实现思路 利用turf.js提供的difference相差函数,计算最大四至和裁剪区域的差值,这里的最大四至即:(-180,-90,180,90),由于底图是墨卡托投影坐标系的,所以我的代码实现过程中把经纬度转换墨卡托投影坐标:裁剪区域就是需要高亮的多边形,我这里是嘉兴市区域. 界面设计 //地图模态层 "<div style='height:25px;backgro

JS实现5秒钟自动关闭的div广告层

<html> <head> <title>JS实现5秒钟自动关闭的div广告层丨礼堂座椅丨轻质隔墙板</title> <style type="text/css"> <!-- #sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;} --> </style> </head> <body> <SC

使用CSS样式表方法绝对居中定位DIV浮动层

有什么简单的方法绝对居中定位DIV浮动层?答案用CSS怎么写样式表就可以了.下面的写法兼容IE系列浏览器和火狐浏览器. 详细解说,直接看样式: #dingwei{padding:10px;color:#FFFFFF; width:600px;height:300px; display:block; position: absolute; top:50%; left:50%; margin-left:-300px; margin-top:-150px;} padding:10px;color:#F

div浮动层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

S实现5秒钟自动关闭的div广告层

<html> <head> <title>JS实现5秒钟自动关闭的div广告层丨kiddy.com</title> <style type="text/css"> <!-- #sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;} --> </style> </head> <body> <SCR

div 遮罩层 弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

div浮动层与div层有何不同css中有什么关系

首先DIV浮动层与DIV层都是指DIV布局,体感音乐一般使用CSS样式表加DIV标签组合进行布局网页. div层一般包括div浮动层,div浮动层说明div被加入css浮动样式所以被称为div浮动层,而没有加入float浮动样式不具有浮动效果,所以如果没有被加浮动样式div不被称为浮动层.当然span.h1.ul.li等标签也是层,只不过span.h1.ul.li等标签没有div使用频率高,所以一般就将div作为象征性称呼. 接下来DIVCSS5通过实例告诉大家什么是一般层,什么是浮动层?为什么