• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML弹出透明层事例大小可以设置也可以比例化

    复制代码
    代码如下:

    <!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="utf-8" />
    <title>LIGHTBOX EXAMPLE</title>
    <style>
    * {
    margin:0;
    padding:0
    }
    html, body {
    height: 100%;
    width: 100%;
    font-size:12px
    }
    .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    padding: 6px 16px;
    border: 12px solid #D6E9F1;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }
    .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color:#f5f5f5;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .close {
    float:right;
    clear:both;
    width:100%;
    text-align:right;
    margin:0 0 6px 0
    }
    .close a {
    color:#333;
    text-decoration:none;
    font-size:14px;
    font-weight:700
    }
    .con {
    text-indent:1.5pc;
    line-height:21px
    }
    </style>
    <script>
    function show(tag){
    var light=document.getElementById(tag);
    var fade=document.getElementById('fade');
    light.style.display='block';
    fade.style.display='block';
    }
    function hide(tag){
    var light=document.getElementById(tag);
    var fade=document.getElementById('fade');
    light.style.display='none';
    fade.style.display='none';
    }
    </script>
    </head>
    <body>
    <a href="javascript:void(0)" onclick="show('light')">打开1</a>
    <a href="javascript:void(0)" onclick="show('light2')">打开2</a>
    <div id="light" class="white_content">
    <div class="close"><a href="javascript:void(0)" onclick="hide('light')"> 关闭</a></div>
    <div class="con">
    内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
    </div>
    <div id="light2" class="white_content">
    <div class="close"><a href="javascript:void(0)" onclick="hide('light2')"> 关闭</a></div>
    <div class="con">
    内容2
    </div>
    </div>
    <div id="fade" class="black_overlay"></div>
    </body>
    </html>

    代码全在上面了,可以复制试试...弹出层的大小可以设置,也可以比例化
    上一篇:html 中 #include file 的用法示例介绍
    下一篇:HTMLimg标签的alt属性和title属性使用介绍
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML弹出透明层事例大小可以设置也可以比例化 HTML,弹出,透明,层,事例,