zoukankan      html  css  js  c++  java
  • 仿Ajax弹出半透明层 (支持IE FF)

    <!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=gb2312" />
    <title>仿Ajax弹出半透明层 (支持IE FF)</title>
    <style type="text/css">
    <!--
    html,body {height:100%; margin:0px; font-size:12px;}

    .mydiv {
    background-color: #FFCC66;
    border: 1px solid #f00;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    font-weight: bold;
    z-index:99;
    300px;
    height: 120px;
    left:50%;/*FF IE7*/
    top:50%;/*FF IE7*/

    margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
    margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

    margin-top:0px;

    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/

    _top:       expression(eval(document.compatMode &&
                document.compatMode=='CSS1Compat') ?
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

    }


    .bg {
    background-color: #666;
    100%;
    height: 100%;
    left:0;
    top:0;/*FF IE7*/
    filter:alpha(opacity=50);/*IE*/
    opacity:0.5;/*FF*/
    z-index:1;

    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/

    _top:       expression(eval(document.compatMode &&
                document.compatMode=='CSS1Compat') ?
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    function showDiv(){
    document.getElementById('popDiv').style.display='block';
    document.getElementById('bg').style.display='block';
    }

    function closeDiv(){
    document.getElementById('popDiv').style.display='none';
    document.getElementById('bg').style.display='none';
    }

    </script>
    </head>
    <body>

    <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你!<br/>Q群号:26868887<br/>
    <a href="javascript:closeDiv()">关闭窗口</a></div>
    <div id="bg" class="bg" style="display:none;"></div>
    <div style="height:1400px; ">
    <p>春江花月夜
        唐 张若虚
       
        春江潮水连海平,海上明月共潮生。<br />
       
       
        滟滟随波千万里,何处春江无月明?<br />
       
        江流宛转绕芳甸,月照花林皆似霰。<br />
       
        空里流霜不觉飞,汀上白沙看不见。<br />
       
        江天一色无纤尘,皎皎空中孤月轮。<br />
       
        江畔何人初见月?江月何年初照人?<br />
       
        人生代代无穷已,江月年年只相似。<br />
       
        不知江月待何人,但见长江送流水。<br />
       
        白云一片去悠悠,青枫浦上不胜愁。<br />
       
        谁家今夜扁舟子?何处相思明月楼?<br />
       
        可怜楼上月徘徊,应照离人妆镜台。<br />
       
        玉户帘中卷不去,捣衣砧上拂还来。<br />
       
        此时相望不相闻,愿逐月华流照君。<br />
       
        鸿雁长飞光不度,鱼龙潜跃水成文。<br />
       
        昨夜闲潭梦落花,可怜春半不还家。<br />
       
        江水流春去欲尽,江潭落月复西斜。<br />
       
        斜月沉沉藏海雾,碣石潇湘无限路。<br />
       
    不知乘月几人归?落花摇情满江树。 </p>
    <p><br />
       
       
        </p>
    <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div>


    <p>&nbsp;</p>
    <p>春天的江潮水势浩荡,与大海连成一片,一轮明月从海上升起,好像与潮水一起涌出来。<br />
        月光照耀着春江,随着波浪闪耀千万里,什么地方的春江没有明亮的月光。<br />
        江水曲曲折折地绕着花草丛生的原野流淌,月光照射着开遍鲜花的树林好像细密的雪珠的闪烁。<br />
        月光象白霜一样从空中流下,感觉不到它的飞翔,它照得江畔的白沙看不见。<br />
        江水、天空成一色,没有些微灰尘,只有明亮的一轮孤月高悬空中。<br />
        江边上什么人最初看见月亮,江上的月亮哪一年最初照耀着人?<br />
        人生一代代地天穷无尽,只有江上的月亮一年年地总是相像。<br />
        不知江上的月亮照耀着什么人,只见长江不断地输送着流水。<br />
        游子象一片白云缓缓地离去,只剩下思妇站在离别的青枫浦不胜忧愁。<br />
        哪家的游子今晚坐着小船在漂流?什么地方有人在明月照耀的楼上相思?<br />
        可怜楼上不停移动的月光,应该照耀着离人的梳妆台。<br />
        美好的闺房中的门帘卷不去月光,在捣衣石上拂去月光但它又来了。<br />
        这时互相望着月亮可是互相听不到声音,我希望随着月光流去照耀着您。<br />
        送信的天鹅能够飞翔很远但不能随月光飞到您身边,送信的鱼龙潜游很远但不能游到您身边,只能在
       
       
        水面激起阵阵波纹。<br />
        昨天晚上梦见花朵落在悠闲的水潭上,可怜春天过了一半还不能回家。<br />
        江水流走春光,春光将要流尽,水潭上月亮晚晚落下,如今又西斜。<br />
        斜月慢慢下沉,藏在海雾里,碣石与潇湘的离人距离无限遥远。<br />
        不知有几人能乘着月光回家,只有那西落的月亮摇荡着离情,洒满了江边的树林。<br />
       
        </p>
    </div>
    </body>
    </html>

  • 相关阅读:
    vue-router 滚动行为封装示例
    HTML5 History 模式 后端ngnix配置
    vue-router 嵌套命名视图
    npm 源管理 nrm
    windows系统git使用zip命令报错解决方法
    vue v-html 动态内容样式无效解决方法
    vue 项目打包 本地预览
    Vue 项目环境变量
    Oracle中的统计信息
    宽表和窄表的区别---字段
  • 原文地址:https://www.cnblogs.com/MaxWoods/p/1317322.html
Copyright © 2011-2022 走看看