如何使用纯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 参考这个网站学习模态框的动态弹 ...
随机推荐
- 使用vue国际化中出现内置的组件无法切换语言的问题(element-ui、ivew)
在main.js中引入对应组件的语言包 eg: import VueI18n from 'vue-i18n'; // 引入国际化 import elementEn from 'element-ui/l ...
- impala 中SQL的优化方法
1.取流水表的数据时,如果是使用全部分区数据,不能从SA层数据取数,需要改从SH层取数,因为SH层为parquet存储,查询性能较好. 2.对于脚本中使用的临时表,如果存在以下情况需要进行统计表信息 ...
- DNS服务和BIND
今天我们来介绍一下DNS服务,在大家的印象中DNS可能只是将域名解析为IP地址,可能其他的暂时还不太了解,希望本篇内容能帮助大家. 1.什么是DNS? DNS( Domain Name System) ...
- 【问题】使用XShell连接Debian,没有语法高亮
编辑家目录里面的.bashrc文件,取消红框中的注释. 我使用的是XShell连接Debian,有的人可能改完也没有语法高亮,试着改下XShell的配色方案 参考:https://www.cnblog ...
- Vs2017 NetCode EF Mysql 控制台应用
1 运行环境 vs2017 NetCode2.0 2 NuGet MySql.Data.EntityFrameworkCore 8.0.18 Json.Net 1.0.16 3 源代 ...
- 14.Vue组件
1.定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不 ...
- Linux shell批量执行scp脚本工具
转载: linux shell + expect:批量scp脚本工具 2011-09-13 15:51:06 分类: Python/Ruby 最近在准备一个部署的任务,其中有一 ...
- python爬虫伪装技术应用
版权声明:本文为博主原创文章,转载 请注明出处: https://blog.csdn.net/sc2079/article/details/82423865 -写在前面 本篇博客主要是爬虫伪装技术的应 ...
- B进制星球(多进制 高精加)
https://www.luogu.org/problemnew/show/P1604 B(2<=B<=36)进制计数.编写实现B进制加法的程序. 输入输出格式 输入格式: 共3行第1行: ...
- java 常用算法和一些题目
选择排序,复杂度O(n²) package com.example.demo; import org.junit.Test; /** * 选择排序 * @author zhzh.yin * */ pu ...