Question

求助，点一个按钮弹出类似这种窗口怎么实现的

Answer 1

/**
* 显示一个弹出界面
*
* @param url
* 界面地址，可以使jsp，页也可以是action
* @param params
* 需要传递的参数
* @param titleDesc
* 页面头描述
* @param width
* 页面宽度
* @param height
* 页面高度
* @param parentView
* 页面所在的父页面
* @param callback
* 回调函数
*/
function showPage(url, params, titleDesc, width, height, parentView, callback) {
var _win = this;
if (!parentView) {
parentView = document;
}
lockScreen_showPage(parentView);
var bordercolor = "#336699";// 提示窗口的边框颜色
var showPageDiv = parentView.createElement("div");
showPageDiv.setAttribute("id", "showPageDiv");
showPageDiv.setAttribute("align", "center");
showPageDiv.style.background = "white";
// showPageDiv.style.border = "1px solid " + bordercolor;
showPageDiv.style.position = "absolute";
showPageDiv.style.left = "50%";
showPageDiv.style.top = "30%";
showPageDiv.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
showPageDiv.style.marginLeft = "-225px";
showPageDiv.style.marginTop = -75 + parentView.documentElement.scrollTop + "px";
showPageDiv.style.width = width + "px";
showPageDiv.style.height = height + "px";
showPageDiv.style.textAlign = "center";
showPageDiv.style.lineHeight = "25px";
showPageDiv.style.zIndex = "10031";
var title = parentView.createElement("h4");
title.setAttribute("id", "showPageTitle");
title.setAttribute("align", "right");
title.style.margin = "0";
title.style.padding = "3px";
// title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";
// title.style.border = "1px solid " + bordercolor;
title.style.height = "18px";
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
// title.style.color = "white";
title.style.cursor = "pointer";
title.title = titleDesc;
title.innerHTML = "<table border='0' width='100%'><tr><td width='85%' align='left'><b id='showPageTitleDesc'>"
+ titleDesc + "</b></td><td id='showPageClose' width='15%' >关闭</td></tr></table>";
var pageBody = parentView.createElement("div");
pageBody.setAttribute("id", "pageBody");
pageBody.style.width = width + "px";
if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {// IE6
pageBody.style.height = height - 26 + "px";
} else {// IE8
pageBody.style.height = height - 25 + "px";
}
pageBody.style.position = "absolute";
pageBody.style.left = "0px";
$.post(url, params, function(data) {
showPageDiv.appendChild(title);
showPageDiv.appendChild(pageBody);
parentView.body.appendChild(showPageDiv);
parentView.getElementById("showPageClose").onclick = function() {
closeShowPage(parentView);
if (callback) {
callback.call(_win);
}
};
$("#pageBody").html(data);
});

}

试试调用这个方法