效果图：

代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>皆容ie和google的弹出div层</title>
  6.     <style>
  7.     body{
  8.         font: 62.5% "Trebuchet MS", sans-serif;
  9.         margin: 0px;
  10.         padding:0px;
  11.     }
  12.     .ui-widget-overlay {
  13.         position: fixed;
  14.         top: 0;
  15.         left: 0;
  16.         width: 100%;
  17.         height: 100%;
  18.         background: #aaaaaa ;
  19.         opacity: .3;
  20.         filter: Alpha(Opacity=30);
  21.     }
  22.     .ui-widget-content{
  23.         position: absolute;
  24.         width: 480px;
  25.         height: 130px;
  26.         left: 30%;
  27.         top: 30%;
  28.         padding: 10px;
  29.  
  30.         border: 1px solid #a6c9e2;
  31.         background: #fcfdfd ;
  32.         color: #222222;
  33.     }
  34.     </style>
  35. </head>
  36. <body>
  37. <div style="position: relative; width: 100%; height: 100%; overflow:hidden;">
  38.     <!-- 页面显示的内容 begin -->
  39.     <table width="100%" height="620">
  40.         <tr><td>333333</td></tr>
  41.         <tr><td>333333</td></tr>
  42.         <tr><td>333333</td></tr>
  43.         <tr><td>333333</td></tr>
  44.         <tr><td>333333</td></tr>
  45.         <tr><td>333333</td></tr>
  46.         <tr><td>333333</td></tr>
  47.         <tr><td>333333</td></tr>
  48.         <tr><td>333333</td></tr>
  49.         <tr><td>333333</td></tr>
  50.     </table>
  51.     <!-- 页面显示的内容 end -->
  52.  
  53.     <!-- ui-dialog 透明的的背景层-->
  54.     <div class="ui-widget-overlay"></div>
  55.  
  56.     <!-- 弹出的层 -->
  57.     <div class="ui-widget-content">
  58.         xxxxxxxxxxx
  59.     </div>
  60. </div>
  61. </body>
  62. </html>

注意：如果上面代码没效果，请注意发现文档最上面的<!doctype html>的文档类型声明是否写了，有些html可以不写,但有时必须写

基于jquery ui修改的不依赖第三方的背景透明的弹出div的更多相关文章

  1. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

  2. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  3. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  4. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  5. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  6. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  7. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  8. 基于Jquery ui 可复用的酒店 web页面选择入住日期插件

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  9. Android定位&地图&导航——基于百度地图，实现自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...

随机推荐

  1. Spring使用环境变量控制配置文件加载(转)

    项目中需要用到很多配置文件,不同环境的配置文件是不一样的,因此如果只用一个配置文件,势必会造成配置文件混乱,这里提供一种利用环境变量控制配置文件加载的方法,如下: 一.配置环境变量 如果是window ...

  2. C#编程（四）

    原文地址:http://blog.csdn.net/shanyongxu/article/details/46400067 C#预定义数据类型 C#中的可用类型以及及其定义非常严格,C#中获得数据类型 ...

  3. 6. python 字符串格式化表达式

    6. python 字符串格式化表达式 字符串格式化允许在一个单个的步骤中对一个字符串执行多个特定类型的替换 特别是给用户提示的时候,格式化非常方便 实现方法: 1.格式化表达式,类似于c语言的pri ...

  4. C++“窗体”程序设计启蒙（之二）

    [摘要]本文适合已经完整学习了C++面向对象机制,但在开发窗体程序方面还是零基础的同学.通过本文的引导进行实践体验,目的是消除同学们开发窗体程序的神奇感,为下一步的自学找到感觉.同一时候,能更深入地体 ...

  5. Cocos2dx 小技巧（十四）ScrollView实现缩放效果

    这阶段心绪比較乱,所以这篇开头就不扯淡了.(谁说大姨夫来了我跟谁急!~~)说到大姨夫我突然想到英雄联盟有个美女讲解叫伊芙蕾亚,她的堂弟ID居然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了) ...

  6. 北京市基本医疗保险A类定点医疗机构名单（2010-09-29）

    1.中国医学科学院北京协和医院 2.首都医科大学附属北京同仁医院 3.首都医科大学宣武医院 4.首都医科大学附属北京友谊医院 5.北京大学第一医院 6.北京大学人民医院 7.北京大学第三医院 8.北京 ...

  7. [Android Pro] Android源码编译之Nexus5真机编译

    reference to : http://blog.csdn.net/liu1075538266/article/details/51272398 1.   前言 在Android安全的研究工作中, ...

  8. @JVM中的几种垃圾收集算法

    标记-清除(Mark-Sweep) 算法分为"标记"和"清除"两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收掉所有被标记的对象(没有与GC Roo ...

  9. 带你走进EJB--它都有哪些Bean

    通过前面一系列EJB的博客,我们已经对EJB有了一个宏观的了解.为够更好的在企业项目中使用EJB,我们很有必要对EJB的一些基本内容进行深入,这次我们主要进行的主题是Enterprise Java B ...

  10. 好久没做codeforces

    近期小结: 做了四场多校的比赛,感觉学到的东西好少诶,除了CLJ那场太神,其他场次的赛后几乎都能独立的AK 感觉顶多就锻炼锻炼代码能力?真是件伤感的事情... 虽然每场都,b,但只要baolaoban ...