这个效果js如何实现
日期：2014-05-16 浏览次数：20375 次
这个效果js怎么实现
我们在用windows的时候，按一个button可以弹出子窗口，然后在子窗口操作，等到子窗口返回，父窗口才继续监听事件。
js能否实现这样的效果，如果能的话怎么做比较好呢？
------解决方案--------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#divId { width:100px; height:100px; margin:0 auto; background-color:#F00; }
</style>
</head>
<body>
<div id="divId"></div>
<script type="text/javascript">
var divs = document.getElementById("divId");
divs.onclick = function() {
var wWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
var wHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var touDiv = document.createElement("div");
touDiv.style.position = "absolute";
touDiv.style.left = 0;
touDiv.style.top = 0;
touDiv.style.width = wWidth + "px";
touDiv.style.height = wHeight + "px";
touDiv.style.backgroundColor = "#666666";
document.body.appendChild(touDiv);
var newDiv = document.createElement("div");
newDiv.style.position = "absolute";
newDiv.style.zIndex = 500;
newDiv.style.width = "400px";
newDiv.style.height = "400px";
newDiv.style.margin = "0 auto";
newDiv.style.backgroundColor = "#F00";
document.body.appendChild(newDiv);
}
</script>
</body>
</html>
------解决方案--------------------
ls说得对，遮罩层。点击button。弹出2层，第一层就是浏览器大小的半透明层（比如background:rgba(0,255,0)），样式z-index设的高些，比如99，第二层样式就是你要操作的子窗口，z-index比上个高一点，100就行。这样第一层就把页面覆盖，不能操作。第二层能操作。
------解决方案--------------------
打开的窗口设置为模式化窗口。
------解决方案--------------------
两种方法：
1：使用showModalDialog弹出新窗口
2：使用div去模拟模态化窗口[建议]；这种方法或是插件在网上好多
jquery Dialog可以
artDialog也可以
我们在用windows的时候，按一个button可以弹出子窗口，然后在子窗口操作，等到子窗口返回，父窗口才继续监听事件。
js能否实现这样的效果，如果能的话怎么做比较好呢？
------解决方案--------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#divId { width:100px; height:100px; margin:0 auto; background-color:#F00; }
</style>
</head>
<body>
<div id="divId"></div>
<script type="text/javascript">
var divs = document.getElementById("divId");
divs.onclick = function() {
var wWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
var wHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var touDiv = document.createElement("div");
touDiv.style.position = "absolute";
touDiv.style.left = 0;
touDiv.style.top = 0;
touDiv.style.width = wWidth + "px";
touDiv.style.height = wHeight + "px";
touDiv.style.backgroundColor = "#666666";
document.body.appendChild(touDiv);
var newDiv = document.createElement("div");
newDiv.style.position = "absolute";
newDiv.style.zIndex = 500;
newDiv.style.width = "400px";
newDiv.style.height = "400px";
newDiv.style.margin = "0 auto";
newDiv.style.backgroundColor = "#F00";
document.body.appendChild(newDiv);
}
</script>
</body>
</html>
------解决方案--------------------
ls说得对，遮罩层。点击button。弹出2层，第一层就是浏览器大小的半透明层（比如background:rgba(0,255,0)），样式z-index设的高些，比如99，第二层样式就是你要操作的子窗口，z-index比上个高一点，100就行。这样第一层就把页面覆盖，不能操作。第二层能操作。
------解决方案--------------------
打开的窗口设置为模式化窗口。
------解决方案--------------------
两种方法：
1：使用showModalDialog弹出新窗口
2：使用div去模拟模态化窗口[建议]；这种方法或是插件在网上好多
jquery Dialog可以
artDialog也可以
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
