解读一下CSDN的这个模式对话框
比如我们在下面的这个CSDN网页中
http://topic.csdn.net/u/20120419/09/1fe391b6-6367-4f4d-9bba-de7055fd702d?2041511901
可以看到
“管理菜单”
“移动”
我复制了下代码，如当我们点击“移动”执行的代码如下：
<li><a href="javascript:;" onclick="try{showWindow({url:'http://forum.csdn.net/PointForum/Manage/MoveTopic.aspx?fid=3036657c-277c-476c-982d-75f154e09050&tid=1fe391b6-6367-4f4d-9bba-de7055fd702d&date=2012-04-19+09%3a11%3a06',width:580,height:270,title:'移动'});}catch(ex){}return false;">移动</a></li>
上面代码中调用的showWindow的代码如下：
我想问的是：是哪些代码使得该框显示出来后，它后面的网页全体变灰不可操作？
var currentDialog = null;
function showWindow(opts) {
if (!currentDialog) {
if (typeof opts.width == "undefined")
opts.width = 200;
if (typeof opts.height == "undefined")
opts.height = 200;
var bounds = getDocumentBounds();
currentDialog = new CsdnDialog(opts.title, opts.left, opts.top,
opts.width, opts.height, false, false);
currentDialog.div_black = document.createElement("div");
currentDialog.div_black.style.position = "absolute";
currentDialog.div_black.style.borderStyle = "none";
currentDialog.div_black.style.zIndex = "1000";
currentDialog.div_black.style.left = "0";
currentDialog.div_black.style.top = bounds.st + "px";
currentDialog.div_black.style.height = "3000px";
currentDialog.div_black.style.width = "3000px";
currentDialog.div_black.style.filter = "alpha(opacity = 40)";
currentDialog.div_black.style.opacity = "0.55857";
currentDialog.div_black.style.backgroundColor = "#999999";
document.body.appendChild(currentDialog.div_black);
currentDialog.onresize = function() {
var bounds = getDocumentBounds();
currentDialog.div_black.style.top = bounds.st - 1000 + "px";
}
currentDialog.onclose = function() {
currentDialog.div_black.style.display = "none";
}
currentDialog.ondispose = function() {
document.body.removeChild(currentDialog.div_black);
currentDialog = null;
}
} else {
currentDialog.div_black.style.display = "block";
currentDialog.resize(opts.left, opts.top, opts.width, opts.height);
currentDialog.setTitle(opts.title);
}
if (typeof opts.url == "string") {
if (/\/Manage\/Top\/AddTop\.aspx/.test(opts.url))
opts.url = opts.url.replace(/%3e/ig, "%uFF1E").replace(/%3c/ig, "%uFF1C")
currentDialog.div_html.innerHTML = "";
currentDialog.iframe = document.createElement("iframe");
currentDialog.iframe.width = (opts.width - currentDialog.edgeWidth * 2) + "px";
currentDialog.iframe.height = (opts.height - 40 - 25) + "px";
currentDialog.iframe.style.margin = "0";
currentDialog.iframe.frameBorder = "0";
currentDialog.iframe.src = opts.url;
currentDialog.div_html.appendChild(currentDialog.iframe);
} else if (typeof opts == "string") {
currentDialog.div_html.innerHTML = opts;
}
currentDialog.show();
}
------解决方案--------------------------------------------------------
不用其他的设置就可以阻止
测试代码
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script> function Move() { div_black = document.createElement("div"); div_black.style.position = "absolute"; div_black.style.borderStyle = "solid"; div_black.style.borderWidth = "2px"; div_black.style.borderColor = "red"; div_black.style.backgroundColor = "#ffffff"; div_black.style.zIndex = 1000; div_black.style.left = "200px"; div_black.style.top = "100px"; div_black.style.height = "300px"; div_black.style.width = "300px"; div_black.innerHTML = "测试内容" document.body.appendChild(div_black); div_black = document.createElement("div"); div_black.style.position = "absolute"; div_black.style.borderStyle = "none"; div_black.style.zIndex = 100; div_black.style.left = "0"; div_black.style.top = 0 + "px"; div_black.style.height = "3000px"; div_black.style.width = "3000px"; div_black.style.filter = "alpha(opacity = 40)"; div_black.style.opacity = "0.55857"; div_black.style.backgroundColor = "#999999"; document.body.appendChild(div_black); }</script></head><body><select><option>sdsd</option></select><input onclick="Move()" type="button" value="移动" /></body></html>