CSS实现覆盖弹窗(效果如JQuery-UI的Dialog)
原理:定义一个新的div用来覆盖整个页面,再把想要弹出的窗口放在这个div上面
1、定义一个div,设置其隐藏(display:none),用于覆盖整个页面,并设置其CSS属性为:
#divBg
{
z-index: 99;
position: absolute;
width: 100%;
height: 100%;
background: #000;
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=20);
}
2、设置要弹出的div的CSS属性为:
#divAdd
{
width: 300px;
height: 348px;
position: absolute;
background: #D6DFF7;
top: 100px;
left: 450px;
z-index: 100;
}
3、弹出窗口的事件:
function ShowAdd() {
if (document.getElementById("divAdd").style.display == "block") {
}
document.getElementById("divAdd").style.position = "absolute";
document.getElementById("divAdd").style.display = "block";
document.getElementById("divBg").style.display = "block";
}
4、关闭窗口的事件:
function CancelAdd() {
document.getElementById("divAdd").style.display = "none";
document.getElementById("divBg").style.display = "none";
}
CSS实现覆盖弹窗(效果如JQuery-UI的Dialog)的更多相关文章
- iframe中的jquery ui modal dialog 覆盖父窗口
在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...
- day14—jQuery UI 之dialog部件
转行学开发,代码100天——2018-03-30 今天主要展示jQuery UI 之dialog部件的用法, 参考文档:https://jqueryui.com/dialog/ 本文记录分享初始的引用 ...
- 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了
在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...
- jquery ui的css设计
jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...
- Jquery UI
jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- 知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
随机推荐
- cocharan-Armitage trend test
Cochran-Armitage trend test是我们常说的趋势卡方检验,一般是针对基因型的2*3列联表的.譬如说三种基因型,如果按照某一个allele来看,可以有0.1.2个拷贝,是有序的,我 ...
- redis3 list类型
list类型及操作list是一个链表结构,主要功能是push,pop.获取一个范围的所有值等,操作中key理解为链表的名字.redis的list类型其实就是一个每个子元素都是string类型的双向链表 ...
- C++第二天学习
回顾: 1.第一个C++程序 头文件 输入输出 名字空间 using namespace std; 扩展名 编译方式 g++ 2.名字空间 3.结构.联合.枚举 4.字符串 标准库提供的表示字符串的类 ...
- Java 英语
Open quote,左括弧 associated with,关联
- Python中执行系统命令常见的几种方法--转载
Python中执行系统命令常见的几种方法 Python中执行系统命令常见的几种方法有: (1)os.system # 仅仅在一个子终端运行系统命令,而不能获取命令执行后的返回信息 # 如果再命令行下执 ...
- Android事件处理概述
不管是桌面应用还是手机应用程序,面对最多的就是用户,经常需要处理的就是用户的动作——也就是需要为用户动作提供响应,这种为用户动作提供响应的机制就是事件处理. Android提供了强大的事件处理机制,包 ...
- IIS8中添加WCF支持几种方法小结[图文]
方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...
- shell 命令合并文本
之前想把代码打印出来看来着,后来合并完之后放在word里发现有2000多页,然后放弃了~anyway,这个命令还是挺有用的. 比如我有文本a001.dat, a002.dat, a003.dat .. ...
- 变形transform的副作用
前面的话 变形transform本来是一个用来处理移动.旋转.缩放和倾斜等基本操作的CSS3属性,但该属性除了完成其本职工作之后,还对普通元素造成了意想不到的影响,本文将详细介绍transform ...
- linux的Make使用的重定向
Linux中,脚本语言环境中,即你用make xxx即其他一些普通linux命令,比如ls,find等,不同的数字,代表不同的含义: 数字 含义 标准叫法 0 标准输入 stdin = ...