基于jquery ui修改的不依赖第三方的背景透明的弹出div
效果图:
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>皆容ie和google的弹出div层</title>
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 0px;
padding:0px;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa ;
opacity: .3;
filter: Alpha(Opacity=30);
}
.ui-widget-content{
position: absolute;
width: 480px;
height: 130px;
left: 30%;
top: 30%;
padding: 10px; border: 1px solid #a6c9e2;
background: #fcfdfd ;
color: #222222;
}
</style>
</head>
<body>
<div style="position: relative; width: 100%; height: 100%; overflow:hidden;">
<!-- 页面显示的内容 begin -->
<table width="100%" height="620">
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
</table>
<!-- 页面显示的内容 end --> <!-- ui-dialog 透明的的背景层-->
<div class="ui-widget-overlay"></div> <!-- 弹出的层 -->
<div class="ui-widget-content">
xxxxxxxxxxx
</div>
</div>
</body>
</html>
注意:如果上面代码没效果,请注意发现文档最上面的<!doctype html>的文档类型声明是否写了,有些html可以不写,但有时必须写
基于jquery ui修改的不依赖第三方的背景透明的弹出div的更多相关文章
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- 基于jQuery UI的调色板插件推荐colorpicker
1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化 引入js文件 & ...
- jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
- Jquery hover鼠标经过时弹出div动态提示语
一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
- 基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
- 基于Jquery ui 可复用的酒店 web页面选择入住日期插件
效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
随机推荐
- Arcgis10.5 python按属性分割图层,属性相同分为一个图层
# coding=utf-8 """ Source code for potential gp tool to create outputs based on attri ...
- hadoop函数说明图
- Android定制争夺战 三大主流ROM横评
随着MIUI在广大“机油”们心目中位置的逐渐攀升,越来越多的厂商也相继推出了属于自己的定制Android ROM,想以此来抢占这一新兴市场,像点心OS.腾讯的Tita以及近期比较热门的百度云ROM等等 ...
- Selenium2+python自动化41-绕过验证码(add_cookie)
前言 验证码这种问题是比较头疼的,对于验证码的处理,不要去想破解方法,这个验证码本来就是为了防止别人自动化登录的.如果你能破解,说明你们公司的验证码吗安全级别不高,那就需要提高级别了. 对于验证码,要 ...
- 【HDOJ】【1964】Pipes
插头DP 做完Formula 1以后这就是傻逼题了……直接将“数路径方案数”改为“计算路径长度取最小值”即可,没多大难度 都不用判当前格子是否能够到达的……不过!外边的一圈“墙”还是要加的!不然会有冗 ...
- Linux中Shell的执行流程
Shell执行流程 1.Printthe info of reminding 打印提示信息 2.Waitinguser for input(wait) 等待用户输入 3.Acceptthe comma ...
- Android消息通知-Notification
Android中常用的消息提醒,一种是Toast弹出提醒内容,一种是AlterDialog弹出框来提醒用户,还有一种就是消息通知的,用Android经常收到各种通知就是Notifation.Notif ...
- WF4.0(3)----变量与参数
已经写了两篇关于WF4.0的博客,算是基础博客,如果是WF比较熟悉就直接跳过吧,如果你对工作流不是很熟悉,或者想了解一下基础的东西,本文还是比较适合你的.工作流中变量,参数,表达式属于数据模型中概念, ...
- CSS 过滤器 兼容ie,火狐和谷歌
这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个 ...
- jQuery的deferred对象使用笔记
一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...