自制模态框-优快云博客

本文链接：https://blog.youkuaiyun.com/u010447573/article/details/46891339

前段时间研究了下bootstarp框架，对于那个模态框非常感兴趣，于是查资料自己写了一个弹出框，总的来说兼容性不太好，但是总之来说做出来了，css并没有怎么修饰，所以可能出来的效果比较难看，但是毕竟这个demo已经成型，若想好看的话就自己在css修饰一下就好。

<html>
	<head>
		<meta charset="utf-8">
	</head>
			<script>
				/*
				 * 弹出DIV层
				*/
				function showDiv()
				{
					var Idiv     = document.getElementById("Idiv");
					var mou_head = document.getElementById('mou_head');
					Idiv.style.display = "block";
					//以下部分要将弹出层居中显示
					Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";
					Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";
					 
					//以下部分使整个页面至灰不可点击
					var procbg = document.createElement("div"); //首先创建一个div
					procbg.setAttribute("id","mybg"); //定义该div的id
					procbg.style.background = "#000000";
					procbg.style.width = "100%";
					procbg.style.height = "100%";
					procbg.style.position = "fixed";
					procbg.style.top = "0";
					procbg.style.left = "0";
					procbg.style.zIndex = "500";
					procbg.style.opacity = "0.6";
					procbg.style.filter = "Alpha(opacity=70)";
					//背景层加入页面
					document.body.appendChild(procbg);
					document.body.style.overflow = "hidden"; //取消滚动条
					 
					//以下部分实现弹出层的拖拽效果
					var posX;
					var posY;
					mou_head.οnmοusedοwn=function(e)
					{
						if(!e) e = window.event; //IE
						posX = e.clientX - parseInt(Idiv.style.left);
						posY = e.clientY - parseInt(Idiv.style.top);
						document.onmousemove = mousemove;
					}
					document.onmouseup = function()
					{
						document.onmousemove = null;
					}
					function mousemove(ev)
					{
						if(ev==null) ev = window.event;//IE
						Idiv.style.left = (ev.clientX - posX) + "px";
						Idiv.style.top = (ev.clientY - posY) + "px";
					}
				}
				function closeDiv() //关闭弹出层
				{
					var Idiv=document.getElementById("Idiv");
					Idiv.style.display="none";
					document.body.style.overflow = "auto"; //恢复页面滚动条
					var body = document.getElementsByTagName("body");
					var mybg = document.getElementById("mybg");
					body[0].removeChild(mybg);
				}
			</script>
	<body>
		<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9; width:300px;height:200px;">
			<div id="mou_head" style="width="100px; height=10px;z-index:1001; position:absolute;">这个是用来实现拖层</div>
			<input type="button" value="关闭" οnclick="closeDiv();" />
		</div>
		<input type="button" value="点击" οnclick="showDiv()">
<!--结束-->
	</body>
</html>

js原生弹出框