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

起点素材：
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");
    }
}

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

模态框，点击取消，让框消失

思路，给取消按钮一个点击事件

让模态框的容器的display样式为none就可

给取消按钮添加一个id

点击就让消失的事件代码