|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
*{
margin:0;
padding:0;
}
#dialog{
position:absolute;
left:50%;
top:50%;
width:300px;
line-
margin:-50px 0 0 -150px;
text-align:center;
background:#ffffff;
border:1px #000 solid;
z-index:999;
font-size: 12px;
}
#shadow{
position:absolute;
left:0;
top:0;
width:100%;
background:#cccccc;
z-index:100;
filter:alpha(opacity=80);
opacity:0.8;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function showDialog(info) {
var shadow = document.createElement("div");
var dialog = document.createElement("div");
shadow.setAttribute("id", "shadow");
dialog.setAttribute("id", "dialog");
// Create button
var button = document.createElement("input");
button.setAttribute("id", "bt");
button.setAttribute("type", "button");
button.setAttribute("value", "关闭");
// Create dialog text
var dialogText = document.createTextNode(info);
dialog.appendChild(dialogText);
dialog.appendChild(button);
var container = $("container");
container.appendChild(shadow);
container.appendChild(dialog);
}
function hideDialog() {
var container = $("container");
var shadow = $("shadow");
var dialog = $("dialog");
container.removeChild(shadow);
container.removeChild(dialog);
}
window.onload = function() {
var bt = $("callWinBt");
bt.onclick = function() {
showDialog("测试层！");
var bt2 = $("bt");
bt2.onclick = function() {
hideDialog();
}
};
}
</script>
</head>
<body>
<div id="container">
<input type="button" value="call window" id="callWinBt">
<img src="1.jpg" width="150" height=200 align="center">
<div>
这是原网页的内容
</div>
</div>
</body>
</html>
|
