zoukankan      html  css  js  c++  java
  • 弹出层提示框---原创


    <html>
    <style>
    #fullbg { background-color:Gray; left:0px; opacity:0.5; position:absolute; top:0px; z-index:3; filter:alpha(opacity=50); /* IE6 */ -moz-opacity:0.5; /* Mozilla */ -khtml-opacity:0.5; /* Safari */ }
    #dialog { background-color:#FFF; border:1px solid #888; display:none; height:100px; left:50%; margin:-100px 0 0 -100px; padding:12px; position:fixed !important; /* 浮动对话框 */ position:absolute; top:50%; 200px; z-index:5; }
    #dialog p {margin:0 0 12px; }
    #tishi p.close { text-align:right; font-size:12px;}
    #tishi { font-size:12px;}
    #tishi .tishi1{padding-left:0px; }
    #tishi .tishi2{padding-left:70px; }
    #tishi .tishi2 a{ color:#F00; cursor: pointer; text-decoration:underline}
    #contents {font-size:12px;color:blue;text-align:center;padding-top:10px;}
    </style>
    <div id="fullbg"></div>
    <div id="dialog">
    <div id="tishi"><span class="tishi1">提示信息</span><span class="tishi2"><a target="_self" class="close" onclick="closeBg();">关闭</a></span></div>
    <hr/>
    <div id="contents">提示内容</div>
    </div>
    <script type="text/javascript" src="http://img.tiandaoedu.com/index/2012/js/jquery.js"></script>
    <script type="text/javascript">
    function showBg() {
    var bh = $("body").height();
    var bw = $("body").width();
    $("#fullbg").css({ height:bh, bw, display:"block" });
    $("#dialog").show();
    }
    function closeBg() {
    $("#fullbg,#dialog").hide();
    }
    </script>

    <body>
    <input type="button" value="showBg" onclick="showBg()"/>
    </body>

    </body>

    </html>

  • 相关阅读:
    TSQL 基础学习 04
    第13章 网络编程
    Oracle 第一天
    第11章 进程与多线程
    Linux 第06天
    构造Json对象串工具类
    第14章 数据库
    第07章 集合
    YARNMR 大数据第二天
    第12章 多媒体
  • 原文地址:https://www.cnblogs.com/lixiuran/p/3303692.html
Copyright © 2011-2022 走看看