jquery 移动端遮罩底部弹出

原创

mob64ca12e4594b 2024-10-13 03:39:33 ©著作权

文章标签 弹出框 jQuery HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e4594b的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 移动端遮罩底部弹出实现教程

本文将会帮助你实现一个简单的移动端底部弹出遮罩效果。为了更好地理解整个流程，我们首先将会列出步骤，然后我会详细介绍每一步需要做的事情，并提供相应的代码示例。

流程概览

我们将整个过程分为以下步骤：

步骤编号	步骤名称	描述
1	创建基本HTML结构	创建遮罩和弹出框的基本HTML结构
2	添加CSS样式	美化遮罩和弹出框，设置其显示和隐藏效果
3	引入jQuery库	引入jQuery库以便我们后续能使用jQuery的特性
4	编写jQuery脚本	编写实现弹出和关闭功能的jQuery代码
5	测试和调试	测试弹出效果并根据需求调整代码

详细步骤

步骤1：创建基本HTML结构

首先，我们需要在HTML中创建一个遮罩和一个底部弹出框。我们可以按以下方式制作：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端遮罩底部弹出示例</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式 -->
<!-- 注意: 根据项目需要，你可以选择引入自己的CSS样式文件 -->
</head>
<body>

    <div class="overlay" id="overlay"></div>
    
    <div class="popup" id="popup">
        <h2>弹出框标题</h2>
        <p>这是一个简单的底部弹出框示例。</p>
        <button id="closeButton">关闭</button>
    </div>

    <button id="openButton">打开弹出框</button> <!-- 这个按钮用来打开弹出框 -->

    <script src=" <!-- 引入jQuery库 -->
    <script src="script.js"></script> <!-- 引入我们后面的JavaScript代码 -->
</body>
</html>

步骤2：添加CSS样式

接下来，我们为遮罩和弹出框添加CSS样式。创建一个 styles.css 文件，并添加以下代码：

body {
    font-family: Arial, sans-serif; /* 设置字体 */
}

.overlay {
    display: none; /* 初始隐藏 */
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
    z-index: 1000; /* 确保遮罩位于顶部 */
}

.popup {
    display: none; /* 初始隐藏 */
    position: fixed; /* 固定定位 */
    bottom: -300px; /* 初始位置在界面外部 */
    left: 0;
    right: 0;
    background-color: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.5); /* 阴影效果 */
    z-index: 1001; /* 确保弹出框位于遮罩之上 */
    transition: bottom 0.3s ease-in-out; /* 动画过渡 */
}

步骤3：引入jQuery库

在HTML文件中，我们已经通过 CDN 引入了 jQuery 库。你可以使用以下代码来确认引入是否成功，并检查浏览器控制台是否存在错误。

步骤4：编写jQuery脚本

创建一个 script.js 文件，并添加以下代码来实现打开和关闭功能：

$(document).ready(function() {
    $('#openButton').on('click', function() {
        // 展示遮罩和弹出框
        $('#overlay').fadeIn(); // 渐显遮罩
        $('#popup').css('bottom', '0'); // 弹出框向上移动到可见位置
        $('#popup').fadeIn(); // 渐显弹出框
    });

    $('#closeButton, #overlay').on('click', function() {
        // 隐藏遮罩和弹出框
        $('#overlay').fadeOut(); // 渐隐遮罩
        $('#popup').css('bottom', '-300px'); // 弹出框向下移动回不可见位置
    });
});