<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右下角滑动弹出层</title>
<style>
.overlay {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
height: 200px;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: none; /* 默认不显示 */
transform: translateX(100%); /* 初始位置在屏幕外 */
transition: transform 0.5s ease;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
border: none;
background-color: transparent;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="overlay" id="myOverlay">
<button class="close-btn" onclick="closeOverlay()">×</button>
<!-- 弹出层内容 -->
<p>这是从右下角滑出的可关闭的弹出层。</p>
</div>
<button onclick="showOverlay()">显示弹出层</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function showOverlay() {
$('#myOverlay').css('transform', 'translateX(0)').show(); // 滑动到屏幕内并显示
}
function closeOverlay() {
$('#myOverlay').css('transform', 'translateX(100%)').hide(); // 滑动到屏幕外并隐藏
}
</script>
</body>
</html>
这段代码实现了一个从右下角滑出并可以关闭的弹出层。通过点击按钮来控制弹出层的显示和隐藏，同时使用了CSS的`transform`和`transition`属性来实现平滑的滑动效果。弹出层内部包含了一个关闭按钮，点击后会调用`closeOverlay`函数来隐藏弹出层。