function showname()//弹出所需模块
{
var show=document.getElementById("shown");
show.style.display="";
document.getElementById("shown").style.top="20px";
document.getElementById("shown").style.left="20px";
suoding();
}
function suoding()//锁定界面
{
var sWidth,sHeight;
sWidth=document.documentElement.clientWidth //当前浏览器内部宽度
sHeight=document.documentElement.clientHeight
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)//判断ie，如果是7以下版本，采用屏幕的宽度和高度，会导致显示结果有一点滚动条
{
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
if(Sys.ie<7)
{
sWidth=screen.width;//显示器宽度，和上面的宽度有一定的出入
sHeight=screen.height;
}
}
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,
opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "50";
document.body.appendChild(bgObj);
}
function closename()//关闭
{
document.getElementById("shown").style.display="none";
var bg=document.getElementById("bgDiv");
if (bg!=null) {//排除有些浏览器不能取到动态div的情况
document.body.removeChild(bg);
}
}

html代码：
<div style=”width:1000px;height:300px;background-color:blue”> <input type=”button” value=”点击” onclick=”alert(‘adfadsfd’)”></input></div>
<div style=”position:absolute”>
<a href=”#” onclick=”showname()”  >显示姓名</a>
<div id=”shown” style=”width:300px;height:200px;background-color:gray; z-index:100; position:absolute;display:none;”><a href=”#” onclick=”closename()”  >关闭</a>
</div>
<div style=”background-color:red;width:100px;height:100px;”></div>
</div>

Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el: 'west_content',
useArrows: true,
autoHeight: true,
split: true,
lines: true,
autoScroll: true,
animate: true,
enableDD: true,
border: false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl: './ext/ext_tree_json.aspx'        })
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: '影像系统管理员',
draggable: false,
id: '0'     });
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
id: 'west',
//el:'panelWest',
title: '系统菜单导航',
split: true,
width: 200,
minSize: 200,
maxSize: 400,
collapsible: true,
margins: '160 0 2 2',
cmargins: '160 5 2 2',
layout: 'fit',
layoutConfig: { activeontop: true },
defaults: { bodyStyle: 'margin:0;padding:0;' },
//iconCls:'nav',
items:
new Ext.TabPanel({
border: false,
activeTab: 0,
tabPosition: 'bottom',
items: [{
contentEl: 'west_content',
title: '影像系统后台管理',
autoScroll: true,
bodyStyle: 'padding:5px;'
}]
})
}, {
region: 'center',
el: 'center',
deferredRender: false,
margins: '160 0 2 0',
html: '<iframe id="center-iframe" width="100%" height=100%  name="main"  frameborder="0" scrolling="auto" style="border:0px none;  background-color:#ffffff; "   src="admin/articles.aspx"></iframe>',
autoScroll: true
},
{
region: 'south',
margins: '0 0 0 2',
border: false,
html: '<div>版权书写处</div>'
}
]
});
setTimeout(function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({ remove: true });
}, 250)
});

注：整个框架参考了火舞狂歌-后台管理框架，直接在vs中运行，有时候会出现ie无响应的情况，但是测试在iis和火狐中正常

var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF')
var current = null
function getEvent() {
if (document.all) {
return window.event; //如果是ie
}
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) ||  (typeof (arg0) == "object" && arg0.preventDefault &&  arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
}
function intocolor() {
document.getElementById("colorpanel").style.display = "";//show 调色板
var colorTable = ''
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr height=12>'
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
if (i == 0) {
colorTable = colorTable +  '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j]  + ColorHex[j] + '">'
}
else {
colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '">'
}
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable + '<td width=11 style="background-color:#' +  ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
}
}
}
}
colorTable = '<table width=253 border="0" cellspacing="0"  cellpadding="0" style="border:1px #000000  solid;border-bottom:none;border-collapse: collapse"  bordercolor="000000">'
+ '<tr height=30><td colspan=21 bgcolor=#cccccc>'
+ '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+ '<tr><td width="3"><td><input type="text"  name="DisColor" id="DisColor" size="6" disabled style="border:solid 1px  #000000;background-color:#ffff00"></td>'
+  '<td width="3"><td><input type="text" name="HexColor"  id="HexColor" size="7" style="border:inset 1px;font-family:Arial;"  value="#000000"></td></tr></table></td></table>'
+ '<table border="1" cellspacing="0" cellpadding="0"  style="border-collapse: collapse" bordercolor="000000"  onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()"  style="cursor:hand;">'
+ colorTable + '</table>';
colorpanel.innerHTML = colorTable
}
function doOver() {
var evt = getEvent();
var element = evt.srcElement || evt.target;
var DisColor = document.getElementById("DisColor");
var HexColor = document.getElementById("HexColor");
if ((element.tagName == "TD") && (current != element)) {
if (current != null) { current.style.backgroundColor = current._background }
element._background = element.style.backgroundColor
DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)
HexColor.value = rgbToHex(element.style.backgroundColor)
element.style.backgroundColor = "white"
current = element
}
}
/**
* firefox 的颜色是以(RGB())出现，进行转换
*/
function rgbToHex(aa) {
if (aa.indexOf("rgb") != -1) {
aa = aa.replace("rgb(", "")
aa = aa.replace(")", "")
aa = aa.split(",")
r = parseInt(aa[0]);
g = parseInt(aa[1]);
b = parseInt(aa[2]);
r = r.toString(16);
if (r.length == 1) { r = '0' + r; }
g = g.toString(16);
if (g.length == 1) { g = '0' + g; }
b = b.toString(16);
if (b.length == 1) { b = '0' + b; }
return ("#" + r + g + b).toUpperCase();
}
else {
return aa;
}
}
function doOut() {
if (current != null) current.style.backgroundColor = current._background;
}
function doclick() {
var evt = getEvent();
var element = evt.srcElement || evt.target;
if (element.tagName == "TD") {
bg = rgbToHex(element._background);
// alert("选取颜色: " + bg);
// return bg;
document.getElementById("TextBox1").value = bg;
document.getElementById("colorpanel").style.display = "none"; //选好颜色后，关闭colorpanel
}
}

aspx代码：
<table >
<tr>
<td><asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox></td>
<td><input id=”Button1″ type=”button” value=”选取颜色” onclick=”intocolor();” /></td>
</tr>
<tr>
<td><div id=”colorpanel” style=”position: absolute;”></div></td>
<td>&nbsp;</td>
</tr>
</table>
注：外套table是为了，显示的时候稍微美观点
声明：现在公布的代码都是本地测试代码，因为项目还没有正式开始写，外观和功能尚可能还有些bug，这些等待到正式项目中调试；大家如果使用这些代码出现问题，请耐心调试，我保证我都是调试正常并且基本上达到我的需求的代码才会放在日志上的。