有勇气的牛排博客
☰

原生前端html+javascript实现弹窗Model

有勇气的牛排 977 前端 2024-12-23 22:50:31

1 前言

在现代前端开发中，弹窗（Modal）是常见的交互组件，广泛应用于表单输入、信息提示和用户确认等场景。尽管框架和库提供了丰富的弹窗功能，但掌握原生 HTML 和 JavaScript 实现弹窗的技术，能帮助开发者深入理解 DOM 操作、事件绑定和样式控制等核心知识。

本篇文章将带您从零开始实现一个功能完善的弹窗组件，涵盖基础布局、交互逻辑以及样式优化，为您的开发技能打下扎实基础。

文章中设计到overlay遮罩层知识点可以参考另一篇文章：html+javascript原生语法实现遮罩层

在原理上，模态框Modal弹窗与这张层是一样的，通过display: none;属性来控制元素是否显示，而且位置也是固定的，故实现固定样式，然后操作class属性，即可实现需求。

2 侧边弹窗实现

本案例是从左边弹出，如需其他方向弹出，可以通过left、right等参数自定义控制。

2.1 html元素

<aside id="menu_mobile" class="menu_mobile"> <!-- 右侧边栏 -->

    <div>
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">


            <div id="phil" style="font-size: 20px"><b>有勇气的牛排</b></div>
            <div class="author_desc">
                CSDN全栈&网络安全领域优质创作者，阿里云社区博客专家。致力于输出体系化编程知识与解决方案，并助力软件行业发展与从业者学习减负，让编程产生更大价值。（欢迎热爱技术的朋友关注，交个朋友，一起探索未知）
            </div>


            <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                <img style="width: 150px;" src="https://static.couragesteak.com/common/qrcode_cs.jpg">
                <span>公众号</span>
            </div>


        </div>
    </div>
</aside>

<div style="display: flex;justify-content: center;align-items: center">
    <button onclick="PopupMenuMobile()">侧边弹窗</button>
</div>

2.2 css样式

<style>
    /* ============ 手机菜单 ============  */
    .menu_mobile {
        /*display: none;*/
        /*padding: 25px;*/

        position: fixed;
        top: 0;
        /*right: -300px; !* 默认隐藏，右侧位置 *!*/
        left: -300px; /* 默认隐藏，右侧位置 */
        width: 300px; /* 弹窗宽度 */
        height: 100%;
        /*background-color: white;*/
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        transition: left 0.3s ease; /* 动画效果 */
        padding: 20px;
        box-sizing: border-box;

        z-index: 101;
        /*scrollbar-width: 3px;*/
        /*scrollbar-color: red transparent;*/
        background-color: pink;
    }

    .menu_mobile.open {
        left: 0;
        display: block;
    }
</style>

2.3 js事件处理

<script>
  function PopupMenuMobile() {
    const popup = document.getElementById('menu_mobile');
    popup.classList.toggle('open');
  }
</script>

由于加水印缘故，图片被加速了，凑活看😅

前端html+javascript实现侧边弹窗.gif

3 居中弹窗实现

3.1 html

说明：

onclick="event.stopPropagation()" 用于阻止父级别click事件穿透。

<div style="display: flex;justify-content: center;align-items: center">
    <button onclick="PopupAlert()">居中弹窗</button>
</div>

<aside id="alert" class="alert" onclick="PopupAlert()"> <!-- 右侧边栏 -->
    <div class="alert_content" onclick="event.stopPropagation()">
        有勇气的牛排
        CSDN全栈&网络安全领域优质创作者，阿里云社区博客专家。致力于输出体系化编程知识与解决方案，并助力软件行业发展与从业者学习减负，让编程产生更大价值。（欢迎热爱技术的朋友关注，交个朋友，一起探索未知）
        <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
            <img style="width: 150px;" src="https://static.couragesteak.com/common/qrcode_cs.jpg">
            <span>公众号</span>
        </div>
    </div>
</aside>

<!--遮罩层-->
<div id="overlay" class="overlay"></div>

3.2 css

<style>

    /* ============ 遮罩层 ============  */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none; /* 默认隐藏 */
    }

    .overlay.active {
        display: block; /* 显示遮罩层 */
        z-index: 90;
    }

    /* ============ 居中弹窗 ============  */
    .alert {
        display: none;
        width: 100%;
        height: 100%;

        position: fixed;
        top: 0;


        border-radius: 10px;


    }

    .alert.active {
        display: flex;
        left: 0;
        z-index: 100;

        justify-content: center;
        align-items: center;
    }

    .alert_content {
        width: 300px;
        height: 300px;
        background-color: white;
        border-radius: 10px;
        padding: 15px;
    }

</style>

3.3 js事件处理

<script>
  function PopupAlert() {
    const overlay = document.getElementById('overlay');
    overlay.classList.toggle('active');

    const popup_alert = document.getElementById('alert');
    popup_alert.classList.toggle('active');
  }
</script>

前端html+javascript实现居中弹窗.gif

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流