您的位置：首页 > Web前端 > JQuery

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

2013-10-12 10:29 246 查看

效果图：

代码：

<!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可以不写,但有时必须写

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航