zoukankan      html  css  js  c++  java
  • 基于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;  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可以不写,但有时必须写

  • 相关阅读:
    小鸡

    一个初中生到程序员的辛酸经历
    一些美国科幻片名字
    jspsql论坛分页的例子
    通过反射动态使用Java类
    用session保持一个数组
    转载-一些动态加载类的文章
    一个有ajax功能的jsp
    通过反射动态使用Java类(转)
  • 原文地址:https://www.cnblogs.com/yangzhilong/p/3364792.html
Copyright © 2011-2022 走看看