JavaScript 弹出层,背景变暗
JavaScript 弹出层,背景变暗,代码不算多,根据你的需要调整一下,这里只是实现了基础的思路,美化不是太好。
<title>JavaScript 弹出层,背景变暗</title>
<script>
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m));
// www.codefans.net 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "200px";
newDiv.style.height = "300px";
newDiv.style.top = "100px";
newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
newDiv.style.background = "EEEEEE";
newDiv.style.border = "1px solid #0066cc";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容";
document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#000";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
// docutment www.codefans.net
// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭激活层";
newA.onclick = function() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
<a href="#" οnclick="openNewDiv(newDiv);return false;">弹出新层</a>
转载于:https://www.cnblogs.com/top5/archive/2010/03/02/1676795.html
JavaScript 弹出层,背景变暗相关推荐
- php layer弹出层更改背景,layui.layer 弹出层背景透明,前景无阴影实现方案
先上具体实现方法. 首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):.myskin{ background-colo ...
- 弹出popwindow 背景变暗
先看下效果图吧 代码如下 package com.example.administrator.popwindowdemo.view;import android.app.Activity; impor ...
- jQuery给页面弹出层添加半透明背景
1.弹出层的设计 使用的东西是很简单的,需要两个div,一个做为弹出层背景的,另一个做为在半透明背景上面一层显示内容的. 在底层半透明div样式: 显示内容的div样式(不重要) jQuery的调用方 ...
- 移动端 js 弹出层内容滚动的时候,不影响body的滚动条处理
如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: <!DOCTYPE HTML&g ...
- html 弹出层 边框半透明,js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: js+CSS弹出居中的背景半透明div层 body{margin:0px;} #bg{widt ...
- Javascript弹出div层
这是一个DIV弹窗效果! 将鼠标移动到此 点击这里查看弹出窗口 这是文章"JavaScript弹出窗口DIV层效果代码"的演示页面,点这里查看原文! 转载于:https://www ...
- html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...
- JavaScript学习笔记(九)(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证 整体代码 二.layer弹出层 1.引入相 ...
- php layer弹出层更改背景,layer更改皮肤的实现方法
layUI的弹出层模块layer在使用时有一个skin属性 skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名. 如果要改变弹出层的title样式或者背景之类的就 ...
最新文章
- Redis 笔记(13)— scan 和 keys 寻找特定前缀key 字段(命令格式、使用示例、定位大key)
- 盘点互联网大厂AI战略变迁,开发者将怎样pick前进路线?
- 西文是指什么_中西文化的关键性差别
- asp.net webapi 自托管插件式服务(转)
- 【Android-NCNN-Vulkan】ncnn-vulkan load param model 速度慢
- cannot use a string pattern on a bytes-like object(bytes与str互转)
- 利用sqoop将oracle 11g中的表迁移至hive表
- Java语音怎么输出翼型_] 靠增大翼型弯度来获得升力增加的操纵面是什么?
- 1 Linux下ps aux下的各种进程状态
- javaSE---最大值最小值和冒泡排序及随机数的讲解
- Java输出杨辉三角形
- Linux系统怎么安装谷歌拼音,linux下安装google拼音输入法
- hive: Error in acquiring locks
- MySQL字段名诸如key的报错问题
- Android 65536错误:Cannot fit requested classes in a single dex file
- java大学生网上请假系统ssm框架
- bzoj1677:求和
- 八十八枚红手印背后的故事
- WIN10升级后无线网卡被禁用解决办法
- 独立经济体——劳动价值
热门文章
- Program Library HOWTO(1)
- 数据库实验7 数据库视图的定义与使用
- 2018青岛ICPC ZOJ 4061: Magic Multiplication(模拟)
- 线性规划单纯型法(bzoj 3112: [Zjoi2013]防守战线)
- bzoj 1854: [Scoi2010]游戏(并查集)
- 差分滤波器的实现及作用于图像提取图像的特征
- java实现使用JDBC-ODBC桥操作数据库。
- [RN] React Native 定义全局变量
- 第五章 列表、元组和字符串[DDT书本学习 小甲鱼]【8】
- loader与plugin,module与chunk,compiler与compilation