本文已经不推荐在使用了,有更加优秀的 ,详情参考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 =
'<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;
}
添加内容用红色字体标出来了,
具体调用方法见 在 web前台页面内弹出框(二)点击打开链接