本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下：
话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西，下面来给各位分享一个原生太js div弹出层实例，有需要的朋友可一起看看。
这个不用多说了,直接贴代码吧.有码有注释:
代码如下:/*
* 弹出DIV层
*/
function showDiv()
{
var Idiv = document.getElementById(“Idiv”);
var mou_head = document.getElementById(‘mou_head’);
Idi
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态网页的开发。在网页设计中，弹出层（也称模态窗口）是一种常见的交互元素，用于展示重要的信息、提示或者表单等。在没有依赖任何第三方库的情况下，我们可以使用纯JavaScript来实现这种功能。本文将详细介绍如何通过JS实现一个简单的div弹出层。
我们需要创建一个HTML结构，包含一个隐藏的div作为弹出层，并设置相应的CSS样式。例如：
```html
<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;">
<div id="mou_head" style="width:100px; height:10px; z-index:1001; position:absolute;">这个是用来实现拖层</div>
<input type="button" value="关闭" onclick="closeDiv()" />
<!-- 弹出层内容 -->
</div>
```
这里的`Idiv`是主弹出层，`mou_head`是用于实现拖拽功能的头部。`z-index`属性用于确保弹出层位于其他元素之上，而`position:absolute`则使其可以相对于浏览器窗口进行定位。
接下来，我们编写JavaScript代码来实现弹出层的显示和关闭功能：
```javascript
// 弹出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");
procbg.setAttribute("id", "mybg");
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, posY;
mou_head.onmousedown = 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);
}
```
这段代码中，`showDiv`函数负责显示弹出层，并设置其位置到屏幕中央。同时，它还会创建一个半透明的背景层，使得用户无法与背景交互。`closeDiv`函数则用于关闭弹出层并移除背景层，恢复页面滚动条。
在实现拖拽效果时，我们通过监听鼠标按下和移动事件，计算鼠标与div左上角的相对位置，然后在鼠标移动时更新div的位置。这样，用户就可以通过鼠标拖动div头部来改变弹出层的位置。
通过以上代码，我们可以创建一个具有居中显示、可拖动以及半透明背景的div弹出层，且无需依赖任何外部库。这种方法简单实用，适合在不需复杂功能的场景下使用。当然，如果项目需要更高级的弹出层功能，如动画效果、自适应布局等，那么使用成熟的库如jQuery UI或Bootstrap会更加方便。
