基于jquery ui修改的不依赖第三方的背景透明的弹出div

效果图:

基于jquery ui修改的不依赖第三方的背景透明的弹出div

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>皆容ie和google的弹出div层</title>
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 0px;
padding:0px;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa ;
opacity: .3;
filter: Alpha(Opacity=30);
}
.ui-widget-content{
position: absolute;
width: 480px;
height: 130px;
left: 30%;
top: 30%;
padding: 10px; border: 1px solid #a6c9e2;
background: #fcfdfd ;
color: #222222;
}
</style>
</head>
<body>
<div style="position: relative; width: 100%; height: 100%; overflow:hidden;">
<!-- 页面显示的内容 begin -->
<table width="100%" height="620">
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
<tr><td>333333</td></tr>
</table>
<!-- 页面显示的内容 end --> <!-- ui-dialog 透明的的背景层-->
<div class="ui-widget-overlay"></div> <!-- 弹出的层 -->
<div class="ui-widget-content">
xxxxxxxxxxx
</div>
</div>
</body>
</html>

注意:如果上面代码没效果,请注意发现文档最上面的<!doctype html>的文档类型声明是否写了,有些html可以不写,但有时必须写

上一篇:Objective-C ,ios,iphone开发基础:多个视图(view)之间的切换,以及视图之间传值。


下一篇:DOM基础:table(表格)