如何使用纯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 参考这个网站学习模态框的动态弹 ...
随机推荐
- ArrayList和CopyOnWriteArrayList(转载)
这篇文章的目的如下: 了解一下ArrayList和CopyOnWriteArrayList的增删改查实现原理 看看为什么说ArrayList查询快而增删慢? CopyOnWriteArrayList为 ...
- laravel 的安装与配置
1.工作环境 php 7.0+ .MySQL5.1+ 这里可以用开发环境包一键安装: 自己用的是wamp(windows)http://www.wampserver.com/en/ linux系统和m ...
- 在浏览器输入 URL 回车之后发生了什么
注意:本文的步骤是建立在,请求的是一个简单的 HTTP 请求,没有 HTTPS.HTTP2.最简单的 DNS.没有代理.并且服务器没有任何问题的基础上. 大致流程 URL 解析 DNS 查询 TCP ...
- 谁还不知道Java String的那点事
String是我们平时接触最多的一种数据类型之一,不同语言有自己内部的实现,今日一起看下Java中String的内部实现. 常问问题 面试中常被提及的String问题 String为什么是Final的 ...
- Python爬微信好友头像,性别,所在地区
本文适合新手(有一定基础的小白) 今天没事,用的网页版微信,于是看源码心理作怪,F12打开,研究了一下,结果发现 /斜眼笑/斜眼笑/斜眼笑 再加上,没事干,(大家有好工作求介绍,本人待就业),Pyth ...
- Codeforces Round #590 (Div. 3) 万恶的自己WAC
C题:一道简单的C题卡了半天,我太菜了 题意:给你一个n*2的矩阵,每个位置有一个数字,对应一种管道,要求通道可不可以从左上通到右下 由提议可以看出,1,2对应的是直管道,3,4,5,6对应弯管道,只 ...
- windows上使用Jenkins&Github实现CICD
一.摘要 本篇文章笔者将详细介绍Jenkins和Github如何实现CICD的,文章将以Jenkins的使用为主线,伴随着介绍Git的使用,加上一些python代码的执行,最终生成测试报告 二.Jen ...
- SimpleThreadPool极简版
package com.dwz.concurrency.chapter13; import java.util.ArrayList; import java.util.LinkedList; impo ...
- Nginx中ngx_http_fastcgi_module
转发请求到 FastCGI 服务器器,不不⽀支持 php 模块⽅方式指令:15.1 fastcgi_pass设置 fastcgi 服务器器的地址.地址可以指定为域名或 IP 地址,以及端⼝口Synta ...
- 02-命令篇——基础命令&常用命令
基础命令 docker 启动与停止 启动docker systemctl start docker 停止docker systemctl stop docker 重启docker systemctl ...