弹出层的位置是当前窗口的正中央,而不是页面的正中央,页面高度较大时有用。
样式可以在引用页自行添加。
页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="popD.js"></script>
</HEAD>
<BODY>
最底层内容
<div id="main" style="display:none;">
<div id="title" style="width:100%;background-color:red;">title</div>
弹出层<input type="button" value="隐藏" id="hid" onclick="closeD();">
</div>
最底层内容
<input type="button" value="显示" id="show" onclick="popD('main','title',300,200);">
<TABLE style="height:1000px;">
<TR>
<TD></TD>
</TR>
</TABLE>
最底层内容<input type="button" value="显示" id="show" onclick="popD('main','title',300,200);">
</BODY>
</HTML>
popD.js
var mainDiv;
var bgDiv;
function popD(mainId, titleId, w, h) {
mainDiv = document.getElementById(mainId);
var bw = document.body.scrollWidth;
var bh = document.body.scrollHeight;
var ch = document.body.clientHeight;
var top = document.body.scrollTop;
bh = bh < ch ? ch : bh;
bgDiv = document.createElement("div");
document.body.appendChild(bgDiv);
bgDiv.style.width = bw + "px";
bgDiv.style.height = bh + "px";
bgDiv.style.opacity = "0.5";
bgDiv.style.backgroundColor = "#D1EEEE";
bgDiv.style.position = "absolute";
bgDiv.style.left = "0";
bgDiv.style.top = "0";
bgDiv.style.zIndex = "98";
mainDiv.style.display = "";
mainDiv.style.backgroundColor = "green";
mainDiv.style.width = w + "px";
mainDiv.style.height = h + "px";
mainDiv.style.position = "absolute";
mainDiv.style.zIndex = "99";
mainDiv.style.left = (bw - w) / 2 + "px";
mainDiv.style.top = top + (ch - h) / 2 + "px";
mainDiv.style.display = "";
var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
var moveable = false;
var tDiv = document.getElementById(titleId);
tDiv.onmousedown = function () {
tDiv.style.cursor = "move";
if (event.button == 1) {
tDiv.setCapture();
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(mainDiv.offsetLeft);
y1 = parseInt(mainDiv.offsetTop);
moveable = true;
}
};
tDiv.onmouseup = function () {
if (moveable) {
tDiv.releaseCapture();
moveable = false;
}
};
tDiv.onmousemove = function () {
if (moveable) {
var x = x1 + event.clientX - x0;
var y = y1 + event.clientY - y0;
if (x + w < bw && x > 0) {
mainDiv.style.left = x;
}
if (y + h < bh && y > 0) {
mainDiv.style.top = y;
}
}
};
}
function closeD() {
bgDiv.style.display = "none";
mainDiv.style.display = "none";
}
分享到:
相关推荐
JS做的隐藏与显示DIV可拖动弹出层实例代码 学习参考
jQuery 可拖拽弹出层
一款JavaScript开发的弹出层,代码简洁,使用的漂亮弹出层 可拖动的弹出层 遮罩层。
自己基于jQuery封装可拖拽非模态弹出层,采用bootstrap风格,可扩展。 通过$.noModel({/**这里放着各个参数*/}); 具体调用方法在commonality.js中
可拖动的弹出层提示效果
jquery实现可拖动弹出层特效是一款非常实用的功能,基于jquery实现的弹出层效果。
jquery实现非常实用的可拖动弹出层特效.zip
js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器
jquery弹出层并可拖动,详细的介绍页面文件里面有,封装好的js,调用接口即可
jQuery LayerModel弹出层插件拖动弹出层效果
jquery弹出层插件点击弹出层可拖动特效
可随意拖动的弹出层,一个可以随意拖动的弹出层……
NULL 博文链接:https://hngmduyi.iteye.com/blog/1660075
可选属性: 1.autoSize="true" 让div自适应大小 可选值true false 默认false 2.width height弹出框的...7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置属性后,直接调用js方法即可使用,相当方便.
弹出层拖动DEMO,可用鼠标拖动到任意位置
主要介绍了jquery实现可拖拽弹出层特效,代码非常精简,效果非常棒,这里推荐给有需要的小伙伴
可以拖拽的弹出层 js实现可以拖拽的弹出层
可拖动图片弹出层插件layer.js