原文如何使用纯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. Python 多进程编程

    import multiprocessing import time import os import random g_nums = [11, 22, 33] def test1(): while ...

  2. Java中程序、进程、线程的区别。

    程序.进程.线程的区别. 程序(program):是一个指令的集合.程序不能独立执行,只有被加载到内存中,系统为他分配资源后才能执行. 进程(process):一个执行中的程序称为进程. 进程是系统分 ...

  3. 1.Hbase简介

    1. Hbase简介 1.1. 什么是hbase(面向列) HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模 结构化存储集群 ...

  4. Nginx系列1.2:nginx-rtmp流媒体服务器添加权限认证(推流权限和播放权限)

    用到的工具:OBS Studio(推流).nginx-rtmp流媒体服务器.VLC(拉取流播放) Nginx系列1:ubuntu16.04编译出适合自己的nginx服务器 Nginx系列1.1:ubu ...

  5. 出现 “java”不是内部或外部命令,也不是可运行程序或批处理文件的问题

    用cmd运行测试下springboot入门案例,没想到出现了如下图这一幕 我电脑环境配置从来没改动过,网上查了下没搜到错误的结果. 可能的情况就是: 安装其他程序的时候,path变量被修改了,导致ja ...

  6. linux实操_shell运算符

    1."$((运算式))"或"[运算式]" 2.expr m + n 注意:expr运算符要有空格 3.expr m - n 4.expr \*,/,/% 乘,除 ...

  7. 算法设计与分析 - 李春葆 - 第二版 - html v2

    1 .1 第 1 章─概论   1.1.1 练习题   1 . 下列关于算法的说法中正确的有( ).   Ⅰ Ⅱ Ⅲ Ⅳ .求解某一类问题的算法是唯一的   .算法必须在有限步操作之后停止   .算法 ...

  8. 企业级分布式 HTAP 数据库管理系统 TBase

    TBase 是腾讯数据平台团队在开源的 PostgreSQL 基础上研发的企业级分布式 HTAP 数据库管理系统: 具备高性能可扩展的分布式事务能力,支持 RC 和 RR 两种隔离级别: 通过安全.管 ...

  9. gRPC 到 JSON 代理生成器 grpc-gateway

    grpc-gateway是protoc的插件,它读取protobuf服务定义并生成反向代理服务器,该服务将RESTful HTTP API转换为gRPC. 这个服务是根据你的服务定义中的google. ...

  10. WCF学习笔记二

    客户端调用WCF服务出现以下错误: “/”应用程序中的服务器错误. 远程服务器返回错误: (415) Unsupported Media Type. 说明: 执行当前 Web 请求期间,出现未经处理的 ...