基于jquery ui修改的不依赖第三方的背景透明的弹出div

时间：2023-02-03 11:20:22

效果图：

基于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的更多相关文章

  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&plus;

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

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

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

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

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

随机推荐

  1. Guava学习-缓存

    Guava的缓存是本地缓存,所以我觉得在使用场景上适合那种并非是高一致性的场景中,而且他的实现和ConcurrentHashMap很类似.但是毕竟是缓存嘛,肯定有自动清除的功能.外加一些什么清除策略等 ...

  2. Mysql更换MyISAM存储引擎为Innodb的操作记录

    一般情况下,mysql会默认提供多种存储引擎,可以通过下面的查看: 1)查看mysql是否安装了innodb插件.通过下面的命令结果可知,已经安装了innodb插件. mysql> show p ...

  3. 每天一个linux命令（18）：find 命令概览

    Linux 下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所 以它的选项也很多,其中大部分选项都值得我们 ...

  4. Zen Coding in Visual Studio 2012

    http://www.johnpapa.net/zen-coding-in-visual-studio-2012 Zen Coding is a faster way to write HTML us ...

  5. JS达到Web指定保存的和打印功能的内容

    背景 首先,说说文章的背景.近期手中的一个项目,因为需求中要求提供Web界面的打印功能.当然假设没有打印机,还能够提供保存到本地.项目组长把这个"小任务"分给了我.本着努力为组长分 ...

  6. C&num;抽象类与接口的区别

    一.抽象类:抽象类是特殊的类,只是不能被实例化(可以用派生类实例化基类对象):除此以外,具有类的其他特性:重要的是抽象类可以包括抽象方法(当然它可以有普通方法),这是普通类所不能的.抽象方法只能声明于 ...

  7. HDU 3835 R&lpar;N&rpar;&lpar;枚举&rpar;

    题目链接 Problem Description We know that some positive integer x can be expressed as x=A^2+B^2(A,B are ...

  8. sockaddr结构体

    sockaddr 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 一,用于存储参与(IP)Windows套接字通信的计算机上的一个internet协议(IP)地址.为了统一地 ...

  9. 设计模式八&colon; 委派&lpar;Delegate&rpar;

    简介 委派模式不属于GOF23种设计模式, 主要角色有三种: 抽象任务角色, 委派者角色, 具体任务角色. 实现层面上, 定义一个抽象接口, 它有若干实现类, 他们真正执行业务方法, 这些子类是具体任 ...

  10. final model for bioinformatics

    final model for bioinformatics 模拟真实的生物系统,从有机分子到细胞,到组织,到器官,到个体,到家系,到群体. 正确的设计结构,可拓展性,可塑性. 良好的可视化. 面向对 ...

相关文章