前端当前页面编辑一些数据时,往往会用到弹出窗口,但每个页面单独修改有显得比较麻烦,因此,可以建立一个公用的方法,去掉用就可以了;
先上效果图
css
.form-panel { } .form-title { font-size: 14pt; padding: 4px; font-weight: bold; background: rgba(255, 255, 255, 0.82); height: 25px; } .form-detial { cursor: pointer; position: absolute; top: 2px; width: 80%; height: 25px; } a { text-decoration: none; } .from-btn-close { display: inline-block; text-decoration: none; padding: 0px 11px; -webkit-border-radius: 3px; -moz-border-radius: 3px; font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; font-size: 9pt; margin-top: 0px; margin-left: 2px; margin-bottom: 2px; line-height: 25px; color: #000; outline: none; background-repeat: repeat-x; cursor: pointer; position: absolute; top: 0px; right: 0px; height: 25px; border: 0px; } .from-btn-close:hover { cursor: pointer; position: absolute; top: 0px; right: 0px; height: 25px; border: 0px; background-color: red; } .from-btn-iframe { border: 0px; border-top: 1px solid #ccc; width: 100%; height: 93%; } .from-btn-div { background: rgba(255, 255, 255, 0.82); border-image: none; width: 100%; bottom: 4px; color: rgb(153, 153, 153); font-weight: bold; margin-right: 3px; border-top-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; position: absolute; height: 30px; } .form-btn-style1 { margin-top: 2px; padding: 6px 11px; background-color: #449d44; color: white; border: 0px; } .form-btn-style1:hover { margin-top: 2px; padding: 6px 11px; background-color: #32cd32; color:white; border: 0px; } .form-btn-style2 { padding: 6px 11px; background-color: #f75f5f; color: white; border: 0px; margin-top: 2px; } .form-btn-style2:hover { padding: 6px 11px; background-color: red; color: white; border: 0px; margin-top: 2px; }javascript方法
//弹出保存窗口 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" 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="title" 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 path = "./editor.html"; OpenDetial('AddForm', path, '账单编辑', 700, 450, function () { //在保存完成后执行 editor.html里边的保存方法 top.frames["AddForm"].AcceptSave(); //方法执行完之后,可以做一些其他操作,比如刷新列表等 刷新列表 });
在editor.html中创建AccpetSave()方法
function AcceptSave() { //保存数据操作 }