如何在本页面点击按钮弹出本页面的另一个div 现在想点击本页面的一个按钮按照model窗口的方式弹出 本页面的另一个隐藏div 弹出的时候不带标题栏只有内容 那位高手知道 请给予帮助！ 解决方案 » 免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货 <script type="text/javascript" language="javascript">function ShowDiv(obj){document.getElementById(obj).style.display = 'block';}</script><input type="button" value="对话框" onclick="ShowDiv('test')"/><div id="test" style="display:none;position:absolute;left:10%;top:10%;width:80%;height:200px;background-color:#F00"></div>代码没有测试，只是基本的方法关键在于position:absolute;和display:none->display:block 已模态窗口的方式显示DIV 父窗口不能点击被屏蔽掉！ 用JQuery或者想楼上说的自己写一个div然后使用 obj.style.display = "block||none" 现实或隐藏。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><style type="text/css"> *{margin:0;padding:0;} .mask{ position:absolute; z-index:999; background-color:#cccccc; display:none; top:0; left:0; filter: Alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }</style><script type="text/javascript"> function show(){ var mask = document.getElementById("mask"); var h_c = document.documentElement.clientHeight; var w_c = document.documentElement.clientWidth; var h_b = document.body.clientHeight; var w_b = document.body.clientWidth; mask.style.width = w_c > w_b ? w_c+"px" : w_b+"px"; mask.style.height = h_c > h_b ? h_c+"px" : h_b+"px"; mask.style.display = "block"; } function hidden1(){ var mask = document.getElementById("mask"); mask.style.display = "none"; }</script></head><body> <a href="javascript:void(0);" onclick="show();" style="margin-left:200px;">點我</a> <div id="mask" class="mask"> <button onclick="hidden1();">我擋住後面了</button> </div></body></html> 我就想让那个form居中显示然后其余的部分遮住另外一个FORM 我以前写过一个模态弹出框，大概的思路是使用一个笼罩层，笼罩层位于弹出窗口和底层页面之间，并设置适当的透明度。不过，细节是个麻烦事，特别是浏览器兼容性这一块哈。如果可能的话建议楼主使用一下第三方JS库的UI插件吧，如JQuery等。 试过了！你的却是可以你的是把当前的DIV的宽度和高度设定的 我在我的画面上也试了试！但是达不到！郁闷 而且还要居中的！ 额，我的这个是全屏覆盖的额。要是只是要个居中的话可以调整大小和位置的。或者用这种办法，写2个div大小一样，一个隐藏一个显示。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>(A.3)服务审批受理</title><link href="css/opStyle.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--#popAccept { width: 331px; height: 181px; position:absolute; left:50%; top:345px; color: #0066CC; font-size:12px; text-align:center; margin-top: -80px; margin-left: -198px;}--></style><script type="text/javascript"> function showObj() { document.getElementById("popAccept").style.display="block"; } function closeObj() { document.getElementById("popAccept").style.display="none"; }</script></head><body><div id="popAccept" style="display:none"> <table width="331" border="0" cellpadding="0" cellspacing="0"> <form id="form2" name="form2" method="post" action=""> <tr> <td height="181" valign="top" bgcolor="#FFFFFF" class="tbLine_blue2"><table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td height="25" background="images/title_pop_bg.png"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="299" class="popTitle">审批操作</td> <td width="28"><div align="center"><img src="images/icon/ico_close.png" width="16" height="16" border="0" style="cursor:pointer" onclick="closeObj(popAccept)" /></div></td> </tr> </table></td> </tr> <tr> <td height="122" class="tbContent"><table width="95%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="68" height="35"><div align="right">审批：</div></td> <td><label> <div align="left"> <select name="select" class="txtbox" id="select"> <option value="开通">开通</option> </select> <span class="fontGray">注释</span></div> </label></td> </tr> <tr> <td height="35" valign="top"><div align="right">备注：</div></td> <td valign="top"><label> <textarea name="textfield5" cols="30" rows="5" class="txtbox" id="textfield5"></textarea> </label></td> </tr> </table></td> </tr> <tr> <td height="30" bgcolor="#F4F8FB"><div align="center"> <input type="image" name="imageField2" id="imageField2" src="images/bt_ok.png"/> <img src="images/bt_cancel.png" width="55" height="21" style="cursor:pointer" onclick="closeObj(popAccept)" /></div></td> </tr> </table></td> </tr> </form> </table></div><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="28" background="images/title_notice_bg.png" class="tbLine_blue1">服务审批受理</td> </tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="8"></td> </tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"> <form id="form1" name="form1" method="post" action=""> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#ABCCDB"> <tr> <td height="32" bgcolor="#EBF7FA" class="tbContent"><div align="right">订单ID </div></td> <td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield" type="text" class="txtbox" id="textfield" /> <div align="left"></div></td> <td bgcolor="#EBF7FA" class="tbContent2"><div align="right">用户ID </div></td> <td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield2" type="text" class="txtbox" id="textfield2" /> <div align="left"></div></td> <td width="90" bgcolor="#EBF7FA" class="tbContent2"><div align="right">服务名称 </div></td> <td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield2" type="text" class="txtbox" id="textfield2" /> <div align="left"></div></td> </tr> <tr> <td width="75" height="32" bgcolor="#EBF7FA" class="tbContent"><div align="right">订单类型 </div></td> <td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield" type="text" class="txtbox" id="textfield" /> <div align="left"></div></td> <td width="75" bgcolor="#EBF7FA" class="tbContent2"><div align="right">用户名称 </div></td> <td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield2" type="text" class="txtbox" id="textfield2" /> <div align="left"></div></td> <td bgcolor="#EBF7FA" class="tbContent2"><div align="right">时间 </div></td> <td bgcolor="#EBF7FA" class="tbContent"><table width="268" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td width="8"></td> <td width="100"><input name="textfield3" type="text" class="txtbox" id="textfield3" size="15" /></td> <td width="19"> <div align="center">至</div></td> <td> <input name="textfield4" type="text" class="txtbox" id="textfield4" size="15" /></td> </tr> </table></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="52"><div align="center"> <input type="image" name="imageField" id="imageField" src="images/bt_query.png" /> </div></td> </tr> </table></td> </tr> </form></table><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#ABCCDB"> <tr> <td width="80" class="tbTitle">订单ID</td> <td width="80" height="30" class="tbTitle">用户ID</td> <td width="100" class="tbTitle">申请用户</td> <td class="tbTitle">服务ID</td> <td class="tbTitle">服务名称</td> <td class="tbTitle">服务提供商</td> <td width="100" class="tbTitle">订单状态</td> <td width="150" class="tbTitle">操作</td> </tr> <tr> <td height="27" bgcolor="#EBF7FA" class="tbContent">000001</td> <td height="27" bgcolor="#EBF7FA" class="tbContent">000001</td> <td height="27" bgcolor="#EBF7FA" class="tbContent">用户名称</td> <td bgcolor="#EBF7FA" class="tbContent">000001</td> <td bgcolor="#EBF7FA" class="tbContent">服务名称</td> <td bgcolor="#EBF7FA" class="tbContent2"><div align="left">提供商名称提供商名称提供商名称</div></td> <td height="27" bgcolor="#EBF7FA" class="tbContent">申请</td> <td height="27" bgcolor="#EBF7FA" class="tbContent"><table width="100" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="20"><img src="images/icon/ico_view.png" alt="" width="16" height="16" border="0" /></td> <td><a href="serviceApproveNote.html">查看</a></td> <td width="20"><img src="images/icon/ico_accept.png" width="16" height="16" /></td> <td><div align="left" onclick="showObj()" style="cursor:pointer">审批</div></td> </tr> </table></td> </tr> </table><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="55"><div align="center" class="font_blue">总共16条 <a href="userManage.html" class="pageLink">首 页</a> <a href="#" class="pageLink">上一页</a> 1 <a href="#" class="pageLink">[2]</a> <a href="#" class="pageLink">下一页</a> <a href="#" class="pageLink">尾页</a> 1/2页 </div></td> </tr></table></body></html>这个是我的页面 能帮我看看么？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #mask{ position:absolute; z-index:888; background-color:#cccccc; display:none; top:0; left:0; filter:Alpha(opacity=50);/*此處用於IE不透明度為半透明百分比*/ -moz-opacity:0.5; /*此處用於舊版火狐不透明數*/ opacity:0.5;/*此處用於新版火狐不透明數值*/ } #view{ position:absolute; width:450px; height:450px; z-index:999;/*視圖div的z-index要大於遮蓋層的*/ display:none; top:0px; left:50%; background-color:#ffffff; border:1px solid green; }</style><script type="text/javascript"> function showDiv(){ var mask = document.getElementById("mask"); var view = document.getElementById("view"); /*計算出當前頁面的大小*/ var h_c =document.documentElement.scrollHeight; var w_c = document.documentElement.scrollWidth; var h_b = document.body.scrollHeight; var w_b = document.body.scrollWidth ; var height = h_c > h_b ? h_c : h_b; var width = w_c > w_b ? w_c : w_b; /*顯示遮蓋層*/ mask.style.width = width+"px"; mask.style.height = height+"px"; mask.style.display = "block"; /*顯示視圖層*/ /*450為div的寬*/ view.style.left = (width-450)/2 + "px"; /*450為div的高*/ view.style.top = document.documentElement.scrollTop+(document.body.clientHeight-450)/2 + "px"; view.style.display="block"; } function hiddenDiv(){ var view = document.getElementById("view"); view.style.display = "none"; var mask = document.getElementById("mask"); mask.style.display = "none"; }</script></head><body> <div> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p>a</p> </div> <!--全屏覆蓋層--> <div id="mask"> </div><div id="view"><a href="javascript:hiddenDiv();">關閉窗口</a></div></body></html> 刚才那个在ie6有点问题，修改了一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #mask{ position:absolute; z-index:888; background-color:#cccccc; display:none; top:0; left:0; filter:Alpha(opacity=50);/*此處用於IE不透明度為半透明百分比*/ -moz-opacity:0.5; /*此處用於舊版火狐不透明數*/ opacity:0.5;/*此處用於新版火狐不透明數值*/ } #view{ position:absolute; width:450px; height:450px; z-index:999;/*視圖div的z-index要大於遮蓋層的*/ display:none; top:0px; left:50%; background-color:#ffffff; border:1px solid green; }</style><script type="text/javascript"> function showDiv(){ var mask = document.getElementById("mask"); var view = document.getElementById("view"); /*計算出當前頁面的大小*/ var h_c =document.documentElement.scrollHeight; var w_c = document.documentElement.scrollWidth; var h_b = document.body.scrollHeight; var w_b = document.body.scrollWidth ; var height = h_c > h_b ? h_c : h_b; var width = w_c > w_b ? w_c : w_b; /*顯示遮蓋層*/ mask.style.width = width+"px"; mask.style.height = height+"px"; mask.style.display = "block"; /*顯示視圖層*/ /*450為div的寬*/ view.style.left = (width-450)/2 + "px"; /*450為div的高*/ view.style.top = document.documentElement.scrollTop+(document.documentElement.clientHeight-450)/2 + "px"; view.style.display="block"; } function hiddenDiv(){ var view = document.getElementById("view"); view.style.display = "none"; var mask = document.getElementById("mask"); mask.style.display = "none"; }</script></head><body> <div> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p>a</p> </div> <!--全屏覆蓋層--> <div id="mask"> </div><div id="view"><a href="javascript:hiddenDiv();">關閉窗口</a></div></body></html> 求助，过于过滤器的问题 IE 6的一个莫名的问题 这些课程需要哪些基础？ java.lang.NullPointerException getParameter中文乱码问题 JS问题 sql语句在jsp中的写法 会话私有的全局变量,可以实现吗 Japplet如何每隔一个固定时间段就更新 ERWin 反向工程 连接oracle数据 js的小问题 麻烦大家看看 jar签名后firefox依然提示发行者未知
<script type="text/javascript" language="javascript">
function ShowDiv(obj){
document.getElementById(obj).style.display = 'block';
}
</script>
<input type="button" value="对话框" onclick="ShowDiv('test')"/>
<div id="test" style="display:none;position:absolute;left:10%;top:10%;width:80%;height:200px;background-color:#F00"></div>代码没有测试，只是基本的方法
关键在于position:absolute;和display:none->display:block
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title><style type="text/css">
*{margin:0;padding:0;}
.mask{
position:absolute;
z-index:999;
background-color:#cccccc;
display:none;
top:0;
left:0;
filter: Alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
</style>
<script type="text/javascript">
function show(){
var mask = document.getElementById("mask");
var h_c = document.documentElement.clientHeight;
var w_c = document.documentElement.clientWidth;
var h_b = document.body.clientHeight;
var w_b = document.body.clientWidth;
mask.style.width = w_c > w_b ? w_c+"px" : w_b+"px";
mask.style.height = h_c > h_b ? h_c+"px" : h_b+"px";
mask.style.display = "block";
}
function hidden1(){
var mask = document.getElementById("mask");
mask.style.display = "none";
}
</script></head><body>
<a href="javascript:void(0);" onclick="show();" style="margin-left:200px;">點我</a>
<div id="mask" class="mask">
<button onclick="hidden1();">我擋住後面了</button>
</div>
</body>
</html>
我以前写过一个模态弹出框，大概的思路是使用一个笼罩层，笼罩层位于弹出窗口和底层页面之间，并设置适当的透明度。不过，细节是个麻烦事，特别是浏览器兼容性这一块哈。如果可能的话建议楼主使用一下第三方JS库的UI插件吧，如JQuery等。
要是只是要个居中的话可以调整大小和位置的。或者用这种办法，写2个div大小一样，一个隐藏一个显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(A.3)服务审批受理</title>
<link href="css/opStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#popAccept {
width: 331px;
height: 181px;
position:absolute;
left:50%;
top:345px;
color: #0066CC;
font-size:12px;
text-align:center;
margin-top: -80px;
margin-left: -198px;
}
-->
</style>
<script type="text/javascript">
function showObj()
{
document.getElementById("popAccept").style.display="block";
}
function closeObj()
{
document.getElementById("popAccept").style.display="none";
}</script>
</head><body>
<div id="popAccept" style="display:none">
<table width="331" border="0" cellpadding="0" cellspacing="0">
<form id="form2" name="form2" method="post" action="">
<tr>
<td height="181" valign="top" bgcolor="#FFFFFF" class="tbLine_blue2"><table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td height="25" background="images/title_pop_bg.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="299" class="popTitle">审批操作</td>
<td width="28"><div align="center"><img src="images/icon/ico_close.png" width="16" height="16" border="0" style="cursor:pointer" onclick="closeObj(popAccept)" /></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="122" class="tbContent"><table width="95%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="68" height="35"><div align="right">审批：</div></td>
<td><label>
<div align="left">
<select name="select" class="txtbox" id="select">
<option value="开通">开通</option>
</select>
<span class="fontGray">注释</span></div>
</label></td>
</tr>
<tr>
<td height="35" valign="top"><div align="right">备注：</div></td>
<td valign="top"><label>
<textarea name="textfield5" cols="30" rows="5" class="txtbox" id="textfield5"></textarea>
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30" bgcolor="#F4F8FB"><div align="center">
<input type="image" name="imageField2" id="imageField2" src="images/bt_ok.png"/>
<img src="images/bt_cancel.png" width="55" height="21" style="cursor:pointer" onclick="closeObj(popAccept)" /></div></td>
</tr>
</table></td>
</tr>
</form>
</table>
</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="28" background="images/title_notice_bg.png" class="tbLine_blue1">服务审批受理</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form id="form1" name="form1" method="post" action="">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#ABCCDB">
<tr>
<td height="32" bgcolor="#EBF7FA" class="tbContent"><div align="right">订单ID </div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield" type="text" class="txtbox" id="textfield" />
<div align="left"></div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><div align="right">用户ID </div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield2" type="text" class="txtbox" id="textfield2" />
<div align="left"></div></td>
<td width="90" bgcolor="#EBF7FA" class="tbContent2"><div align="right">服务名称 </div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield2" type="text" class="txtbox" id="textfield2" />
<div align="left"></div></td>
</tr>
<tr>
<td width="75" height="32" bgcolor="#EBF7FA" class="tbContent"><div align="right">订单类型 </div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield" type="text" class="txtbox" id="textfield" />
<div align="left"></div></td>
<td width="75" bgcolor="#EBF7FA" class="tbContent2"><div align="right">用户名称 </div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><input name="textfield2" type="text" class="txtbox" id="textfield2" />
<div align="left"></div></td>
<td bgcolor="#EBF7FA" class="tbContent2"><div align="right">时间 </div></td>
<td bgcolor="#EBF7FA" class="tbContent"><table width="268" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="8"></td>
<td width="100"><input name="textfield3" type="text" class="txtbox" id="textfield3" size="15" /></td>
<td width="19"> <div align="center">至</div></td>
<td>
<input name="textfield4" type="text" class="txtbox" id="textfield4" size="15" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="52"><div align="center">
<input type="image" name="imageField" id="imageField" src="images/bt_query.png" />
</div></td>
</tr>
</table></td>
</tr>
</form>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#ABCCDB">
<tr>
<td width="80" class="tbTitle">订单ID</td>
<td width="80" height="30" class="tbTitle">用户ID</td>
<td width="100" class="tbTitle">申请用户</td>
<td class="tbTitle">服务ID</td>
<td class="tbTitle">服务名称</td>
<td class="tbTitle">服务提供商</td>
<td width="100" class="tbTitle">订单状态</td>
<td width="150" class="tbTitle">操作</td>
</tr>
<tr>
<td height="27" bgcolor="#EBF7FA" class="tbContent">000001</td>
<td height="27" bgcolor="#EBF7FA" class="tbContent">000001</td>
<td height="27" bgcolor="#EBF7FA" class="tbContent">用户名称</td>
<td bgcolor="#EBF7FA" class="tbContent">000001</td>
<td bgcolor="#EBF7FA" class="tbContent">服务名称</td>
<td bgcolor="#EBF7FA" class="tbContent2"><div align="left">提供商名称提供商名称提供商名称</div></td>
<td height="27" bgcolor="#EBF7FA" class="tbContent">申请</td>
<td height="27" bgcolor="#EBF7FA" class="tbContent"><table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20"><img src="images/icon/ico_view.png" alt="" width="16" height="16" border="0" /></td>
<td><a href="serviceApproveNote.html">查看</a></td>
<td width="20"><img src="images/icon/ico_accept.png" width="16" height="16" /></td>
<td><div align="left" onclick="showObj()" style="cursor:pointer">审批</div></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="55"><div align="center" class="font_blue">总共16条 <a href="userManage.html" class="pageLink">首 页</a> <a href="#" class="pageLink">上一页</a> 1 <a href="#" class="pageLink">[2]</a> <a href="#" class="pageLink">下一页</a> <a href="#" class="pageLink">尾页</a> 1/2页 </div></td>
</tr>
</table>
</body>
</html>这个是我的页面 能帮我看看么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#mask{
position:absolute;
z-index:888;
background-color:#cccccc;
display:none;
top:0;
left:0;
filter:Alpha(opacity=50);/*此處用於IE不透明度為半透明百分比*/
-moz-opacity:0.5; /*此處用於舊版火狐不透明數*/
opacity:0.5;/*此處用於新版火狐不透明數值*/
}
#view{
position:absolute;
width:450px;
height:450px;
z-index:999;/*視圖div的z-index要大於遮蓋層的*/
display:none;
top:0px;
left:50%;
background-color:#ffffff;
border:1px solid green;
}
</style>
<script type="text/javascript">
function showDiv(){
var mask = document.getElementById("mask");
var view = document.getElementById("view");
/*計算出當前頁面的大小*/
var h_c =document.documentElement.scrollHeight;
var w_c = document.documentElement.scrollWidth;
var h_b = document.body.scrollHeight;
var w_b = document.body.scrollWidth ;
var height = h_c > h_b ? h_c : h_b;
var width = w_c > w_b ? w_c : w_b;
/*顯示遮蓋層*/
mask.style.width = width+"px";
mask.style.height = height+"px";
mask.style.display = "block";
/*顯示視圖層*/
/*450為div的寬*/
view.style.left = (width-450)/2 + "px";
/*450為div的高*/
view.style.top = document.documentElement.scrollTop+(document.body.clientHeight-450)/2 + "px";
view.style.display="block";
}
function hiddenDiv(){
var view = document.getElementById("view");
view.style.display = "none";
var mask = document.getElementById("mask");
mask.style.display = "none";
}
</script>
</head><body>
<div>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>a</p>
</div>
<!--全屏覆蓋層-->
<div id="mask">
</div>
<div id="view"><a href="javascript:hiddenDiv();">關閉窗口</a></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#mask{
position:absolute;
z-index:888;
background-color:#cccccc;
display:none;
top:0;
left:0;
filter:Alpha(opacity=50);/*此處用於IE不透明度為半透明百分比*/
-moz-opacity:0.5; /*此處用於舊版火狐不透明數*/
opacity:0.5;/*此處用於新版火狐不透明數值*/
}
#view{
position:absolute;
width:450px;
height:450px;
z-index:999;/*視圖div的z-index要大於遮蓋層的*/
display:none;
top:0px;
left:50%;
background-color:#ffffff;
border:1px solid green;
}
</style>
<script type="text/javascript">
function showDiv(){
var mask = document.getElementById("mask");
var view = document.getElementById("view");
/*計算出當前頁面的大小*/
var h_c =document.documentElement.scrollHeight;
var w_c = document.documentElement.scrollWidth;
var h_b = document.body.scrollHeight;
var w_b = document.body.scrollWidth ;
var height = h_c > h_b ? h_c : h_b;
var width = w_c > w_b ? w_c : w_b;
/*顯示遮蓋層*/
mask.style.width = width+"px";
mask.style.height = height+"px";
mask.style.display = "block";
/*顯示視圖層*/
/*450為div的寬*/
view.style.left = (width-450)/2 + "px";
/*450為div的高*/
view.style.top = document.documentElement.scrollTop+(document.documentElement.clientHeight-450)/2 + "px";
view.style.display="block";
}
function hiddenDiv(){
var view = document.getElementById("view");
view.style.display = "none";
var mask = document.getElementById("mask");
mask.style.display = "none";
}
</script>
</head><body>
<div>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>模擬原始頁面,<a href="javascript:showDiv();">彈出窗口</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>a</p>
</div>
<!--全屏覆蓋層-->
<div id="mask">
</div>
<div id="view"><a href="javascript:hiddenDiv();">關閉窗口</a></div>
</body>
</html>