<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>基础样式设置</title> <style> .clear{ clear: both } #box{ width: 100px; height:100px; border:2px solid #ddd;} .upbox_bg{ background: #000; opacity: 0.4; filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4; position: fixed; width: 100%; height: 100%;display: none;} .upbox{background: #fff; width:300px; height: 200px; z-index: 1000; position:fixed; margin: -100px 0 0 -150px; left: 50%; top: 50%; display: none;} .upbox div a{ color: #fff; width: 30px; height: 30px; text-align: center; display: block; line-height: 30px; float: left; margin-right: 20px; } .upbox div span{ float: left; } a#red{ background: red; } a#yellow{ background:yellow; } a#blue{ background:blue; } .upbox div a#w200 ,.upbox div a#w300 ,.upbox div a#w400 ,.upbox div a#h200,.upbox div a#h300,.upbox div a#h400{ border: 1px solid #666; color: #666; } </style> </head> <script type="text/javascript" src="js/jquery-1.12.1.js"></script> <script type="text/javascript"> window.onload = function(){ var oAa = document.getElementById('aa'); oBtn1 = document.getElementById('btn1') oRed = document.getElementById('red'); oYellow = document.getElementById('yellow'); oBlue = document.getElementById('blue'); oW200 = document.getElementById('w200'); oW300 = document.getElementById('w300'); oW400 = document.getElementById('w400'); oH200 = document.getElementById('h200'); oH300 = document.getElementById('h300'); oH400 = document.getElementById('h400'); oHf = document.getElementById('hf'); oQd = document.getElementById('qd'); oBox = document.getElementById('box'); oUpbox_bg = document.getElementById('upbox_bg') oUpbox = document.getElementById('upbox') oBtn1.onclick = function(){ oUpbox_bg.style.display = 'block' oUpbox.style.display = 'block' } oRed.onclick = function(){ oBox.style.background = 'red' } oYellow.onclick = function(){ oBox.style.background = 'yellow' } oBlue.onclick = function(){ oBox.style.background = 'blue' } oW200.onclick = function(){ oBox.style.width = '200px' } oW300.onclick = function(){ oBox.style.width = '300px' } oW400.onclick = function(){ oBox.style.width = '400px' } oH200.onclick = function(){ oBox.style.height = '200px' } oH300.onclick = function(){ oBox.style.height = '300px' } oH400.onclick = function(){ oBox.style.height = '400px' } oHf.onclick = function(){ oBox.style.height = '100px' oBox.style.width = '100px' oBox.style.background = 'none' } oQd.onclick = function(){ oUpbox_bg.style.display = 'none' oUpbox.style.display = 'none' } } </script> <body> <!-- 弹框 --> <div id="aa" style=" 100%; height: 100%;"> <div class="upbox_bg" id="upbox_bg"></div> <div class="upbox" id="upbox"> <div><span>请选择背景颜色：</span><a id="red" href="javascript:void(0)">红</a><a id="yellow" href="javascript:void(0)">黄</a><a id="blue" href="javascript:void(0)">蓝</a></div> <div><span>请选择宽度：</span><a id="w200" href="javascript:void(0)">200</a><a id="w300" href="javascript:void(0)">300</a><a id="w400" href="javascript:void(0)">400</a></div> <div><span>请选择高度：</span><a id="h200" href="javascript:void(0)">200</a><a id="h300" href="javascript:void(0)">300</a><a id="h400" href="javascript:void(0)">400</a></div> <div class="clear"></div> <input id="hf" type="button" name="" value="恢复"><input id="qd" type="button" name="" value="确定"> </div> </div> 为下面div设置样式：<input id="btn1" type="button" name="" value="点击设置"> <div id="box"></div> </body> </html>