JavaScript项目2_模态窗口

本次我们需要实现的小项目如下

当我们点击按钮时候，我弹出一个窗口。相信大家在很多网站上看到过这样的组件！

本项目的HTML代码和CSS代码非常的简单，如果有小伙伴想要的话可以私信我

● 如上，那个模态窗口在CSS中被隐藏，所以不会出现，但是实际上是有的，我们要做的，就是使用JavaScript让他展现出来

现在我们就开始
● 不管三七二十一，先把所以涉及到的DoM元素全部拿到

const modal = document.querySelector('.modal');
const overlay = document.querySelector('overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');
1
2
3
4

注：
● querySelector 返回满足指定选择器的第一个匹配元素。
● querySelectorAll 返回满足指定选择器的所有匹配元素的 NodeList 列表。

● 所以我们使用querySelectorAll可以把它当作一个数组，例如我们可以通过for循环把所有btn的text打印出来

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');

for (let i = 0; i < btnsOpenModal.length; i++)
  console.log(btnsOpenModal[i].textContent);
1
2
3
4
5
6
7
8
9

● 下个文章我们来接受如果去操作class