web 前台页面内弹出框（二）

 

 

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

 

 

 

 

前端当前页面编辑一些数据时，往往会用到弹出窗口，但每个页面单独修改有显得比较麻烦，因此，可以建立一个公用的方法，去掉用就可以了;

先上效果图

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="关闭" >Ｘ</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() {
           //保存数据操作
        }