jquery-通过按钮控制模态的显示与隐藏

最新推荐文章于 2024-03-13 23:01:47 发布

原创最新推荐文章于 2024-03-13 23:01:47 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript控制模态框的显示与隐藏，通过改变CSS的display属性，实现模态框的动态控制。文章详细解释了如何为按钮添加点击事件，以及如何响应事件使模态框显示或隐藏。

起点素材：
https://cloud.189.cn/t/VVZr2qqYriey (0817-蒙态框)

终点素材：
https://cloud.189.cn/t/rIRBzeqMVn2m（访问码：6846）

分析

素材默认的模态框内容都是显示状态

通过js要控制他们的开始和关闭

两种办法

1，控制css样式，控制他们的display的属性值，为none就不显示，为block就显示

2，控制盒子装备的样式。另写一个隐藏的样式，如果装备上就让他们隐藏，如果没有装备就让他们显示

本节我们使用方案一来完成

改一改代码

由于庶罩层与信息层都是一起出现，一起消失的

考虑把他们装在一个容器中，然后控制容器的消息与显示

容器盒子

在这里插入图片描述

控制容器的显示

在这里插入图片描述

效果

没有模态框了

点击按钮，显示模态框

思路

给按钮添加一个点击事件

事件中，让模态的容器盒子display状态为block就可

html代码

在这里插入图片描述

开始写效果

$(main);

function main() {
    // 获取控制显示的按钮,绑定他的事件
    $("#btn_show_motai").click(show_motai);

    // 显示模态框的方法
    function show_motai() {
        // 让模态框容器显示
        $(".motai_container").css("display","block");
    }
}

效果，点击了按钮后，模态框就可以显示了