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

参考文章：点击打开链接 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 =
            '<div id="panel" class="form-panel">'
                + '<div id="title"  class="form-title" style="cursor: all-scroll;" align="center">' + title + '</div>'
                + '<div id= "titleDetial" style= "form-detial" align= "center"></div>'
                + '<div id="coloseDetial" title="点击关闭" class="from-btn-close">'
                + ' <a id="ClosesButton" href="javascript:void(0)" style="color:black"  onclick="CloseDetial()" title="关闭" >Ｘ</a > '
                + ' </div>'
                + ' <iframe name="' + id + '" id="' + id + '" class="from-btn-iframe" ></iframe>'
                + '<div id="btn-div" class="from-btn-div" height="25px">'
                + '  <div style="position: absolute;bottom:4px"><input type="checkbox" id="isClose" checked="checked">保存时关闭</div>'
                + '  <input class="form-btn-style1" style="right:90px;position: absolute;" type="button" onclick="saveData()" value="保 存">'
                + '  <input class="form-btn-style2" style="right:20px;position: absolute;" type="button" onclick="CloseDetial()" value="取 消"></div>'
                + '</div>';
        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 前台页面内弹出框（二）点击打开链接