Reference article: Click to open the link https://blog.csdn.net/mixi9760/article/details/52059047
Tribute to God
Modify the pop-up box in the web front page (2) Click the OpenDetial() method to open the link
// pop up save window 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="关闭" >X</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; }
The additions are marked in red font,
For the specific calling method , please refer to the pop-up box in the front page of the web page (2) Click to open the link