web 前台页面内弹出框（三）可拖动

本文已经不推荐在使用了，有更加优秀的 ，详情参考layui弹出层

 

 

参考文章：点击打开链接  https://blog.csdn.net/mixi9760/article/details/52059047

向大神致敬

 

修改web前台页面内弹出框（二）点击打开链接   的OpenDetial（）方法

//弹出保存窗口
function OpenDetial(id, url, title, width, height, callBack) {
    var _srcWidth = parseInt(screen.width);
    var _srcHeight = parseInt(screen.height);
    var _width = parseInt(width) || _srcWidth;
    var _height = parseInt(height) || _srcHeight;

    var cssWidth = width == undefined ? "100%" : _width;
    var cssHeight = height == undefined ? "100%" : _height;

    //    var left = (_srcWidth - _width) == 0 ? 0 : ((_srcWidth - _width) / 2 - 300);
    //    var top = (_srcHeight - _height) == 0 ? 0 : ((_srcHeight - _height) / 2 - 100);
    var left = "10px";
    var top = "10px;";

    this._id = id + "_panel";
    var htmlDiv = document.getElementById(this._id);
    if (htmlDiv == null || htmlDiv === undefined || htmlDiv == "undefined") {
        var detial =
            '
'
                + '
 style="cursor: all-scroll;" align="center">' + title + '
'
                + '
'
                + '
'
                + ' Ｘ '
                + ' 
'
                + ' '
                + '
'
                + '  
保存时关闭
'
                + '  '
                + '  
'
                + '
';
        var body = document.getElementsByTagName("body")[0];
        htmlDiv = document.createElement("div");
        htmlDiv.id = this._id;
        htmlDiv.innerHTML = detial;
        htmlDiv.setAttribute("style", "position:absolute;bottom:10px;width: 90%;top: 2px;height:90%;background-color: rgba(255, 255, 255, 0.36)");
        body.appendChild(htmlDiv);
        document.getElementById("panel").setAttribute("style", "width: " + cssWidth + "px;height:" + cssHeight + "px;left:" + left + ";top:" + top + ";position:absolute;border:1px solid #ccc;opacity:1;background-color:white");
    }

    document.getElementById(id).setAttribute("src", url);
    htmlDiv.style.display = "block";
    this.CloseDetial = function() {
        var htmlDiv = document.getElementById(this._id);
        htmlDiv.style.display = "none";
    }

    this.saveData = function() {
        callBack();
        var check = document.getElementById("isClose").getAttribute("checked");
        if (check === true || check === "checked") {
            var htmlDiv = document.getElementById(this._id);
            htmlDiv.style.display = "none";
        }
    }
    var startx;
    var starty;
    var startLeft;
    var startTop;
    var titleDiv = document.getElementById("title");
    var mainDiv = document.getElementById("panel");
    var isDown = false;
    //    鼠标按下
    function movedown(e) {
        e = e ? e : window.event;
        isDown = true;
        startx = e.clientX;
        starty = e.clientY;
        startLeft = parseInt(mainDiv.style.left);
        startTop = parseInt(mainDiv.style.top);
    }
    //    鼠标移动
    function move(e) {
        e = e ? e : window.event;
        if (isDown) {
            mainDiv.style.left = e.clientX - (startx - startLeft) + "px";
            mainDiv.style.top = e.clientY - (starty - startTop) + "px";
        }
    }
    //    鼠标松开
    function moveup() {
        isDown = false;
    }
    titleDiv.onmousedown = movedown;
    titleDiv.onmousemove = move;
    titleDiv.onmouseup = moveup;
 
}


  
 

添加内容用红色字体标出来了，

具体调用方法见  在  web前台页面内弹出框（二）点击打开链接