日期:2014-05-17  浏览次数:20386 次

解读一下CSDN的这个模式对话框,背景如何变灰?
解读一下CSDN的这个模式对话框

比如我们在下面的这个CSDN网页中
http://topic.csdn.net/u/20120419/09/1fe391b6-6367-4f4d-9bba-de7055fd702d.html?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.html == "string") {
currentDialog.div_html.innerHTML = opts.html;
}
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 = &q