div with separated html template
代码
<!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>
<title></title>
<script>
function setSize(div, innerDiv) {
var doc = document.documentElement;
var sw = parseFloat(doc.scrollWidth);
var cw = parseFloat(doc.clientWidth);
var sh = parseFloat(doc.scrollHeight);
var ch = parseFloat(doc.clientHeight);
div.style.width = sw >= cw ? sw : cw;
div.style.height = sh >= ch ? sh : ch;
innerDiv.style.display = '';
innerDiv.style.left = parseFloat(doc.scrollLeft) + cw / 2 - parseFloat(innerDiv.clientWidth) / 2;
innerDiv.style.top = parseFloat(doc.scrollTop) + ch / 2 - parseFloat(innerDiv.clientHeight) / 2;
}
function openNewWindow() {
var div = document.getElementById("container");
var innerDiv = document.getElementById("content");
setSize(div, innerDiv);
window.attachEvent("onresize", function() { setSize(div, innerDiv) });
window.attachEvent("onscroll", function() { setSize(div, innerDiv) });
}
function closeWindow() {
var div = document.getElementById("container");
var innerDiv = document.getElementById("content");
div.style.width = 0;
div.style.height = 0;
innerDiv.style.display = 'none';
}
function Button1_onclick() {
openNewWindow();
}
</script>
</head>
<body>
<div id="container" style="filter: alpha(opacity=40); position: absolute; top: 0px;
left: 0px; z-index: 9998; background: black">
</div>
<div id="content" style="height: 200px; width: 300px; position: absolute;
display: none; z-index: 9999;">
<div style="text-align: center; background-color: Gray;border:solid 1px gray">
<iframe style="border-style: none; width: 100%; height: 100%;" frameborder="0">
</iframe>
<button onclick="closeWindow();">
close</button>
</div>
</div>
<p>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /></p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script>
function setSize(div, innerDiv) {
var doc = document.documentElement;
var sw = parseFloat(doc.scrollWidth);
var cw = parseFloat(doc.clientWidth);
var sh = parseFloat(doc.scrollHeight);
var ch = parseFloat(doc.clientHeight);
div.style.width = sw >= cw ? sw : cw;
div.style.height = sh >= ch ? sh : ch;
innerDiv.style.display = '';
innerDiv.style.left = parseFloat(doc.scrollLeft) + cw / 2 - parseFloat(innerDiv.clientWidth) / 2;
innerDiv.style.top = parseFloat(doc.scrollTop) + ch / 2 - parseFloat(innerDiv.clientHeight) / 2;
}
function openNewWindow() {
var div = document.getElementById("container");
var innerDiv = document.getElementById("content");
setSize(div, innerDiv);
window.attachEvent("onresize", function() { setSize(div, innerDiv) });
window.attachEvent("onscroll", function() { setSize(div, innerDiv) });
}
function closeWindow() {
var div = document.getElementById("container");
var innerDiv = document.getElementById("content");
div.style.width = 0;
div.style.height = 0;
innerDiv.style.display = 'none';
}
function Button1_onclick() {
openNewWindow();
}
</script>
</head>
<body>
<div id="container" style="filter: alpha(opacity=40); position: absolute; top: 0px;
left: 0px; z-index: 9998; background: black">
</div>
<div id="content" style="height: 200px; width: 300px; position: absolute;
display: none; z-index: 9999;">
<div style="text-align: center; background-color: Gray;border:solid 1px gray">
<iframe style="border-style: none; width: 100%; height: 100%;" frameborder="0">
</iframe>
<button onclick="closeWindow();">
close</button>
</div>
</div>
<p>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /></p>
</body>
</html>
