遮罩层与弹出框实例

最新推荐文章于 2020-12-19 13:15:21 发布

比特论坛

最新推荐文章于 2020-12-19 13:15:21 发布

阅读量329

点赞数 1

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/weixin_45561151/article/details/104366686

版权

web前端专栏收录该内容

2 篇文章

订阅专栏

					web前端开发————遮罩层与点击弹出框实例

HTML代码片段
<input type=“button” value=“点击” οnclick=“Alert()” 结尾标签不能忘

JS代码片段
function Alert(){
//1.创建遮罩层
var div=document.createElement(“div”);//动态创建div盒子
div.id=“box”;//创建id
div.style.width=document.body.offsetWidth+“px”;//返回div的父元素的x坐标值
div.style.height=screen.height+“px”;//返回屏幕的高度值
div.style.background="#323232";//给div添加背景颜色
div.style.opacity=“0.2”;//改变透明度Confirm
div.style.position=“absolute”;//div绝对定位
div.style.top=“0”;
div.style.left=“0”;
div.style.zIndex=‘1000’;//定义文档流之间的层级关系
document.body.appendChild(div);//动态创建div添加到document文档显示

			//2.创建提示框
			var Confirm=document.createElement("div");//动态创建提示框
			Confirm.id="content";//创建ID
			Confirm.style.width="400"+"px";//设置div宽度
			Confirm.style.height="300"+"px";//设置div高度
			Confirm.style.background="#fff";//设置div的背景颜色
			Confirm.style.zIndex="1001";//设置div在文档流中最上层 层级关系
			Confirm.style.border="1px solid #ff0000";//设置div的边框
			Confirm.style.position="absolute";//div绝对定位
			Confirm.style.top="30%";
			Confirm.style.left="35%";
			document.body.appendChild(Confirm);
			
			//3.创建提示框中title
			var title=document.createElement("h3");//动态创建提示框
			title.id="mstag";//创建ID
			title.style.margin="0";
			title.style.background="#3c3c3c";
			title.align="right";
			title.innerHTML="关闭";
			title.onclick=function(){
				document.body.removeChild(div);
				document.body.removeChild(Confirm);
			}
			Confirm.appendChild(title);
			
			
			
		}