浮动窗口Html

最新推荐文章于 2025-03-13 17:03:51 发布

小七Zzzz

最新推荐文章于 2025-03-13 17:03:51 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42769197/article/details/82414118

本文介绍了一种使用纯HTML和CSS实现的简单弹窗效果。通过设置特定的样式类，可以使页面上的链接触发一个带有遮罩层的弹出窗口。该方法适用于快速原型设计和简单的网页交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tanchuang</title>
</head>
<body>

<style> 
        .class_1{ 
            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=88); 
        } 
        .class_2 { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 55%; 
            height: 55%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    </style> 
    </head> 
    <body> 
        <p>弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p> 
        <div id="light" class="class_1">示例程序. 
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div> 
        <div id="fade" class="class_2"></div> 
    </body> 
</html>
</body>
</html>