纯CSS的遮挡效果

最新推荐文章于 2022-06-09 14:54:45 发布

银狐被占用

最新推荐文章于 2022-06-09 14:54:45 发布

阅读量2.9k

点赞数

分类专栏： JAVASCRIPT HTML 文章标签： css javascript html class iframe filter

本文链接：https://blog.csdn.net/baby97/article/details/5880865

版权

JAVASCRIPT 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>纯CSS Lightbox效果</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=15);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid #8e8e8e;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
<body>
    <p>页面内容. <br>
    遮挡效果请 <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击</a></p>
        <p> <select name="aa"></select></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div>
        <div id="fade" class="black_overlay"><iframe width="100%" height="100%"></iframe></div>
</body>
</html>