从底部滑出的固定定位弹出层实现教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

从底部滑出的固定定位弹出层实现教程

2025-11-28

浏览次数：次

返回列表

从底部滑出的固定定位弹出层实现教程

本教程将详细指导如何使用html、css和j*ascript（jquery）创建一个从页面底部平滑滑出且不影响文档流的弹出层组件。通过利用css的position: fixed实现元素固定定位，transform: translatey实现垂直方向的动画，以及transition属性提供平滑过渡效果，我们将构建一个用户友好的交互式ui元素。

在现代网页设计中，弹出层（Pop-up）是一种常见的交互模式，用于展示额外信息、菜单或表单。本教程将专注于实现一种特定类型的弹出层：当用户点击按钮时，它能从页面底部平滑地向上滑出，并且在出现时不会影响页面其他内容的布局。

核心技术概览

实现这种效果主要依赖于以下CSS和J*aScript技术：

position: fixed: 使元素脱离文档流，相对于浏览器视口进行定位。这是确保弹出层不影响页面布局的关键。
transform: translateY(): 用于在Y轴（垂直方向）上移动元素。我们将利用它来将弹出层初始隐藏在视口下方，并在激活时将其移回可见区域。
transition: 提供元素属性变化的平滑动画效果，使得弹出层的出现和隐藏过程更加自然。
z-index: 控制元素的堆叠顺序，确保弹出层始终位于其他内容之上。
J*aScript (jQuery): 用于监听按钮点击事件，并动态添加/移除CSS类来触发动画。

HTML 结构

首先，我们需要定义页面的基本HTML结构。这包括一个触发弹出层的按钮和一个用于显示内容的弹出层容器。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从底部滑出的弹出层</title>
    <!-- 引入jQuery库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        /* 这里将放置CSS样式 */
    </style>
</head>
<body>

    <div class="main-content" style="height: 150vh; background-color: #f0f0f0; padding: 20px;">
        <h1>页面主体内容</h1>
        <p>向下滚动以查看固定在底部的按钮。</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, quidem.</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/836">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680206288398.png" alt="Pinokio">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/836">Pinokio</a>
                            <p>Pinokio是一款开源的AI浏览器，可以安装运行各种AI模型和应用</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Pinokio">
                                <span>232</span>
                            </div>
                        </div>
                        <a href="/ai/836" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Pinokio">
                        </a>
                    </div>
                
        <!-- 更多内容以确保页面可滚动 -->
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, quidem.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, quidem.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, quidem.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
    </div>

    <!-- 底部固定菜单区域 -->
    <div class="bottom-fixed-menu">
        <button id="popup-trigger-button">打开菜单</button>
        <!-- 弹出层内容 -->
        <div class="popup-content">
            <p>这是一个从底部滑出的弹出层内容示例。</p>
            <p>您可以在这里放置任何HTML元素，如导航链接、表单或详细信息。</p>
        </div>
    </div>

    <script>
        // 这里将放置J*aScript代码
    </script>
</body>
</html>

在上述HTML结构中：

.main-content 仅用于模拟一个可滚动的页面主体。
.bottom-fixed-menu 是包含触发按钮和弹出层的主容器，它将固定在页面底部。
#popup-trigger-button 是点击后触发弹出层显示的按钮。
.popup-content 是实际的弹出层，它将从底部滑出。

CSS 样式实现

接下来，我们为这些HTML元素定义样式，以实现固定定位、隐藏、显示和动画效果。

/* 页面主体内容，仅用于演示滚动 */
.main-content {
    height: 150vh; /* 确保页面可滚动 */
    background-color: #f0f0f0;
    padding: 20px;
}

/* 底部固定菜单容器 */
.bottom-fixed-menu {
    position: fixed; /* 固定定位 */
    z-index: 777; /* 确保在弹出层下方 */
    bottom: 0; /* 贴合页面底部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确水平居中 */
    background-color: chartreuse; /* 背景色 */
    padding: 10px 20px;
    border-radius: 5px 5px 0 0; /* 顶部圆角 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.bottom-fixed-menu button {
    padding: 8px 40px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

.bottom-fixed-menu button:hover {
    background-color: #0056b3;
}

/* 弹出层默认样式：初始隐藏在视窗下方 */
.popup-content {
    display: flex;
    flex-direction: column; /* 内容垂直排列 */
    justify-content: center;
    align-items: center;
    position: fixed; /* 固定定位 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%) translateY(1000%); /* 关键：水平居中，并垂直向下移动极远的距离使其完全隐藏 */
    width: 90%; /* 弹出层宽度 */
    max-width: 600px; /* 最大宽度 */
    height: auto; /* 高度自适应内容 */
    min-height: 150px; /* 最小高度 */
    padding: 20px;
    font-size: 18px;
    color: white;
    background-color: darkgoldenrod;
    border-radius: 10px 10px 0 0; /* 顶部圆角 */
    z-index: 999; /* 确保在所有内容之上，包括按钮容器 */
    transition: transform 0.4s ease-out; /* 动画过渡效果，只针对transform属性 */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.popup-content p {
    margin: 5px 0;
    line-height: 1.6;
}

/* 弹出层激活样式：滑入视窗 */
.popup-content.active {
    bottom: 29px; /* 关键：最终位置，距离底部29px */
    transform: translateX(-50%) translateY(0); /* 关键：取消垂直位移，使其滑入视窗 */
    /* 注意：bottom属性与transform结合使用时，transform的优先级更高，
             这里bottom: 29px会设置元素基线，然后transform: translateY(0)将元素从该基线位置显示 */
}

CSS 关键点解析：

.bottom-fixed-menu:
- position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); 共同作用，将按钮容器固定在页面底部中央。
- z-index: 777; 确保它在一般内容之上，但在弹出层之下。
.popup-content (默认隐藏状态):
- position: fixed; left: 50%; transform: translateX(-50%) translateY(1000%); 是实现隐藏和水平居中的核心。translateX(-50%) 用于水平居中，而 translateY(1000%) 将元素向下移动一个非常大的距离，使其完全脱离视口。
- `transition: transform 0.4s ease-

以上就是从底部滑出的固定定位弹出层实现教程的详细内容，更多请关注其它相关文章！

# javascript # css # 它将 # 白山关键词排名谁家正规 # 这是 # 圆角 # 滑入 # 文档 # 怎么全面优化网站 # 营销推广奖励制度内容 # 镇江网站优化效果怎么样 # 网站营销策划推广方案 # 推广比较好的网站是什么 # 南开区全网营销整合推广 # seo黑客学习 # 泰州网站建设企业推荐 # 网站关键词突然排名没 # 表单 # 使其 # 滑出 # 弹出 # c # 网页设计 # cdn # ai # 浏览器 # go # ajax # js # html # jquery # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：Leaflet地图弹窗图片加载优化：动态处理缺失图片链接以避免破损图标

下一篇：解决HTML元素尺寸不一致问题：深入理解box-sizing

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

从底部滑出的固定定位弹出层实现教程

核心技术概览

HTML 结构

CSS 样式实现