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

posted @ 2013-10-12 10:29  自行车上的程序员  阅读(887)  评论(0)  编辑  收藏  举报