原文如何使用纯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实现一个带有灰色半透明背景的弹出框的更多相关文章

  1. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  2. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  3. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  4. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  5. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  6. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  7. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  8. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  9. js 常见弹出框学习

    模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...

随机推荐

  1. WeChat App Word

    chats:聊天:n werun:微信运动 contacts:联系人:n official accounts:官方账号(公众号) discover:发现:vi moments:片刻(朋友圈动态):n ...

  2. spring.factories配置文件的工厂模式

    在springboot的各个依赖包下,我们经常看到META-INF/spring.factories这个文件.spring.factories文件的内容基本上都是这样的格式: # Initialize ...

  3. Java中常见时间类的使用

    模拟场景针对于常用的操作API,比如流操作(字符流.字节流),时间操作等,仅仅了解概念性的定义终究是无法了解该类的用途和使用方式:这种情况在使用的时候便一脸茫然,脑海中映射不到对应的知识点.本篇博客将 ...

  4. 自定义centos

    目录 自定义centos 1. 为什么要自定义centos 2. 自定义centos步骤 自定义centos 1. 为什么要自定义centos 在使用官网的 centos镜像,只有200m,很小,但是 ...

  5. js 执行完setTimeout再接着执行函数

    var counter = 0; function increase(){ var d = jQuery.Deferred(); var doIncrease = function() { if(co ...

  6. zabbix初级进阶

    目录 一.理论概述 zabbix功用 运行条件 缺点 zabbix组件 部署 web安装zabbix 优化 总结 这篇文章主要对zabbix有一个全面且简单的了解 一.理论概述 zabbix功用 检测 ...

  7. Hosts 长期更新【已停】

    修改hosts篇 [2018.1.3] 由于google的对应的hosts更新过于频繁,再加上上次(18+1)大之后,国家政策原因,网上hosts更新基本上都停了,github的项目也陆续挂掉了. 还 ...

  8. 动态规划1——最长递增子序列、最长公共子序列、最长公共子串(python实现)

    目录 1. 最长递增序列 2. 最长公共子序列 3. 最长公共子串 1. 最长递增序列 给定一个序列,找出其中最长的,严格递增的子序列的长度(不要求连续). 解法一:动态规划 通过一个辅助数组记录每一 ...

  9. WPF绑定属性

    1.创建model类 model类要继承接口INotifyPropertyChanged,用于通知客户端属性值已更改 public class StudentModel : INotifyProper ...

  10. 大数据之路week05--day02(Maven安装,环境变量的配置及基本使用)

    今天我们就来学习一下maven,怎么说呢,maven更像是一种管理的工具,实现的原理是使用插件. 举个例子,比如说,一个公司需要做一个项目,这个项目又分成了很多的模块,每个模块又分成了许多的业务等等, ...