如何使用纯js实现一个带有灰色半透明背景的弹出框
// 加入透明背景
var body = document.body;
var backgroundDiv = document.createElement("div");
backgroundDiv.style.cssText = "left:0;top:0;
position:fixed;
background:#ddd;opacity:0.8;width:100%;height:100%";
body.appendChild(backgroundDiv);
// 加入居中弹出框
var newDiv = document.createElement("div");
newDiv.style.cssText = "position:absolute;margin:auto;
left:0;right:0;top:0;
bottom:0;width:400px;
height:200px;background:white;";
backgroundDiv.appendChild(newDiv); // 丰富弹出框内容 ......
如何使用纯js实现一个带有灰色半透明背景的弹出框的更多相关文章
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
- 【原创】贡献一个JS的弹出框代码...
一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- js 常见弹出框学习
模拟系统的弹出框 系统自带的弹出框 总结 链接 http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...
随机推荐
- 微信小程序tabBar与redirectTo 或navigateTo冲突
微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...
- 7.Redis的发布订阅
Redis消息的订阅/发布 a)是什么 进程间的一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. b)命令 SUBSCRIBE订阅 PUBLISH发布 c)案例 先订阅后发布后才 ...
- Linux报错排解
1.Loaded plugins: product-id, search-disabled-repos, subscription-manager This system is not registe ...
- MySQL Windows安装连接
1.首先进入mysql的安装目录下的bin目录,例如我的是[C:\WINDOWS\System32\cmd.exe] 2.接着输入cmd,回车 3.在命令行中输入命令[mysql -hlo ...
- Java abstract类的基本使用 和 [abstract类实现]打印1000以内的所有素数并输出时间
笔记: /** 关键字abstract ,实现抽象类,相当于给出类的大纲,子类只管继承,但抽象类不可被实例化! * 1.抽象方法只保留方法的功能,而具体的执行,交给继承抽象类的子类,由子类重写所有的抽 ...
- 2BIT
bit是比特,是英文 binary digit的缩写.而Byte是字节又叫bait. bit是表示信息的最小单位,是二进制数的一位包含的信息或2个选项中特别指定1个的需要信息量.一般来说,n比特的信息 ...
- rugarch包与R语言中的garch族模型
来源:http://www.dataguru.cn/article-794-1.html rugarch包是R中用来拟合和检验garch模型的一个包.该包最早在http://rgarch.r-forg ...
- Java集合--Set架构
前面,我们已经系统的对List和Map进行了学习.接下来,我们开始可以学习Set.相信经过Map的了解之后,学习Set会容易很多.毕竟,Set的实现类都是基于Map来实现的(HashSet是通过Has ...
- 如何查看float在内存中存储方式
float fla = -1000; unsigned int *pfla = (unsigned int*)&fla; printf("fla=%X\n",*pfla); ...
- python大战EXCEL--xlwings
xlwings的特色 xlwings能够非常方便的读写Excel文件中的数据,并且能够进行单元格格式的修改 可以和matplotlib以及pandas无缝连接 可以调用Excel文件中VBA写好的程序 ...