<!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=iso-8859-1">
<title>Untitled Document</title>
<script src="lib/jquery/jquery-1.4.js"></script>
<script type="text/javascript">
function bc(){
if($('.modelcss').css('display') == 'none'){
$('.modelcss').css('display','block');
$('.buttoncss').css('display','block');
}else{
$('.modelcss').css('display','none');
$('.buttoncss').css('display','none');
}
}
</script>
<style type="text/css">
body{
background-color:#FFFFFF;
font-size:12px;
color:#333333;
}
.modelcss {
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background:#ffffff;
z-index:1;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.buttoncss{
display:none;
position:absolute;
top:45%;
left:45%;
width:10%;
height:10%;
background-color:#999999;
z-index:2;
}
</style>
</head>
<body>
<div id='modeldiv' class="modelcss"></div>
<div id="buttondiv" class="buttoncss" disabled="true">
<button onclick="bc();"> OK </button>
<button onclick="bc();"> Cancel </button>
</div>
<button onclick="bc();"> Test </button>
<table>
<tr>
<td><a href="#">adfasdfasdf</a></td>
</tr>
<tr>
<td><input type="text" ></td>
</tr>
<tr>
<td><select>
<option selected=true> 11111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select></td>
</tr>
</table>
</body>
</html>当出现出现确定对话层时，用tab键还可以选择页面上的按钮，下拉菜单等元素，如果让tab的焦点始终保持在对话层上直到该层关闭啊？顺便在问个问题，如何让对话层上的2个按钮上下居中啊？谢谢解答！
return $('.modelcss').css('display') == 'none' || v.which != 9 ; // 这个意思
} ;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function bc(){
if($('.modelcss').css('display') == 'none'){
$('.modelcss').css('display','block');
$('.buttoncss').css('display','block');
$('.buttoncss').focus();
}else{
$('.modelcss').css('display','none');
$('.buttoncss').css('display','none');
}
}
window.onload = (function(){
$('#buttondiv button:last').keydown(function(e){
if(e.keyCode==9) {$('#buttondiv button:first').focus(); return false;}
});
$('#buttondiv button').each(function(index){
var l=$('#buttondiv button').length;
$(this).css({"position":"absolute",top:(index/l*100)+"%"});
});
});
</script>
<style type="text/css">
body{
background-color:#FFFFFF;
font-size:12px;
color:#333333;
}
.modelcss {
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background:#ffffff;
z-index:1;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.buttoncss{
display:none;
position:absolute;
top:45%;
left:45%;
width:10%;
height:10%;
background-color:#999999;
z-index:2;
}
</style>
</head>
<body>
<div id='modeldiv' class="modelcss"></div>
<div id="buttondiv" class="buttoncss">
<button onclick="bc();"> OK </button>
<button onclick="bc();"> Cancel </button>
<button onclick="bc();"> Third </button>
</div>
<button onclick="bc();"> Test </button>
<table>
<tr>
<td><a href="#">adfasdfasdf</a></td>
</tr>
<tr>
<td><input type="text" ></td>
</tr>
<tr>
<td><select>
<option selected=true> 11111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select></td>
</tr>
</table>
</body>
</html>