<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0;padding:0;}
box{height:100px;width:100px;background:skyblue;}
big_box{height:100%;width:100%;background:rgba(0,0,0,0.1);position:fixed;top:0;left:0;display:none;}
small_box{position:absolute;height:150px;width:280px;top:50%;left:50%;margin-left:-140px;margin-top:-75px;background:white;cursor:pointer}
p1 span{height:20px;width:30px;display:inline-block}
small_box p{height:40px;line-height:40px;}
small_box p font{margin-left:25px;}
small_box p span{margin-left:15px;}
small_box{padding:15px;border:1px solid red}
wan{margin-left:45%;margin-top:15px;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oBtn = document.getElementById('btn')
var oBig = document.getElementById('big_box')
var oWan = document.getElementById('wan')
var oSpan = document.getElementsByTagName('span')
var oBox = document.getElementById('box')
oBtn.onclick = function(){oBig.style.display = "block"}
oWan.onclick = function(){oBig.style.display = "none"}
oSpan[0].onclick = function(){oBox.style.background= this.style.background;}
oSpan[1].onclick = function(){oBox.style.background= this.style.background;}
oSpan[2].onclick = function(){oBox.style.background= this.style.background;}
oSpan[3].onclick = function(){oBox.style.width = this.innerHTML}
oSpan[4].onclick = function(){oBox.style.width = this.innerHTML}
oSpan[5].onclick = function(){oBox.style.width = this.innerHTML}
oSpan[6].onclick = function(){oBox.style.height = this.innerHTML}
oSpan[7].onclick = function(){oBox.style.height = this.innerHTML}
oSpan[8].onclick = function(){oBox.style.height = this.innerHTML}
}
</script>
</head>
<body>
<div id="box"></div>
<button id="btn">click</button>
<div id="big_box">
<div id="small_box">
<p id="p1">
<font>颜色:</font>
<span style="background:red"></span>
<span style="background:blue"></span>
<span style="background:green"></span>
</p>
<p id="p2">
<font>宽度:</font>
<span>250px</span>
<span>500px</span>
<span>750px</span>
</p>
<p id="p3">
<font>高度:</font>
<span>250px</span>
<span>500px</span>
<span>750px</span>
</p>
<button id="wan">完成</button>
</div>
</div>
</body>
</html>
