可以拖动的弹出层

最新推荐文章于 2021-06-17 01:52:27 发布

weixin_33863087

最新推荐文章于 2021-06-17 01:52:27 发布

阅读量239

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/235267/blog/109558

版权

2019独角兽企业重金招聘Python工程师标准>>>

/*
  弹出层
*/
//弹出层(divbgId背景层ID，conId显示的内容层ID)
function openLayer(divBgId, divConId) {
    var arrayPageSize   = getPageSize(); //调用getPageSize()函数
    var arrayPageScroll = getPageScroll(); //调用getPageScroll()函数

    //显示背景层
    var bodyBack = document.getElementById(divBgId);
    bodyBack.style.position = "absolute";
    bodyBack.style.width = "100%";
    bodyBack.style.height = (arrayPageSize[1] + 'px');
    bodyBack.style.zIndex = 999;
    bodyBack.style.top = 0;
    bodyBack.style.left = 0;
    bodyBack.style.filter = "alpha(opacity=50)";
    bodyBack.style.opacity = 0.5;
    bodyBack.style.background = "#ddddff";
    bodyBack.style.display = "block";

    //显示内容层,让弹出层在页面中居中显示(个性)
    var popObj = document.getElementById(divConId);
    var arrayConSize = getConSize(divConId);
    popObj.style.position = "absolute";
    popObj.style.zIndex = 9999;
    popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 + 'px';
    popObj.style.left = (arrayPageSize[2] - arrayConSize[0]) / 2 + 'px';
    popObj.style.display = "block";
}

//获取内容层内容原始尺寸
function getConSize(conId)
{
    var conObj = document.getElementById(conId);
    var w = parseInt(conObj.style.width);
    var h = parseInt(conObj.style.height);
    var arrayConSize = [w, h];
    return arrayConSize;
}
//获取滚动条的高度
function getPageScroll(){
    var yScroll;
    if (self.pageYOffset)
    {
        yScroll = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
    {
        yScroll = document.documentElement.scrollTop;
    }
    else if (document.body)
    {
        yScroll = document.body.scrollTop;
    }
    arrayPageScroll = new Array('', yScroll)

    return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){
    var xScroll,yScroll;
    if (window.innerHeight && window.scrollMaxY)
    {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    }
    else if (document.body.scrollHeight > document.body.offsetHeight)
    {
        sScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    }
    else {
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth,windowHeight;
    if (self.innerHeight) {
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    }
    else if (document.body) {
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    var pageWidth,pageHeight
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    }
    else {
        pageHeight = yScroll;
    }
    if(xScroll < windowWidth) {
        pageWidth = windowWidth;
    }
    else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)

return arrayPageSize;
}

//关闭弹出层
function closeLayer(divBgId, divConId) {
    document.getElementById(divConId).style.display = "none";
    document.getElementById(divBgId).style.display = "none";
    //document.getElementById(divBgId).style.width = "0px";
    //document.getElementById(divBgId).style.height = "0px";
    return false;
}

/*
* 拖拽效果
*/
var oldX, oldY; // 记录鼠标移动事件发生前鼠标的位置
var dragElem; // 记录被拖曳的对象
var drag = false;
function $(nodeId) {
    return document.getElementById(nodeId);
}
// 拖动开始
function StartDrag(evt, nodeId) {
    //dragElem = $("divInfo");
    dragElem = $(nodeId);
    evt = evt || event;   // 为了兼容IE和firefox，firefox执行evt，IE则执行evt=event
    oldX = evt.clientX - parseInt(dragElem.style.left);
    oldY = evt.clientY - parseInt(dragElem.style.top);
    drag = true;
    document.onmousemove = Drag;
}
// 拖动的动作
function Drag(evt) {
    if (drag == true) {
        // 为了兼容IE和firefox，firefox执行evt，IE则执行evt=event
        evt = evt || window.event;
        dragElem.style.top = (evt.clientY - oldY) + 'px';
        dragElem.style.left = (evt.clientX - oldX) + 'px';
    }
}
// 拖曳结束，释放onmousemove事件执行函数
function StopDrag() {
    drag = false;
}