JavaScript实现模态框

创建 HTML 结构

定义了模态框的结构，并包括一个按钮来触发模态框的显示。

编写 CSS 样式：

用于样式化模态框，包括背景遮罩效果和内容布局。

容器：使用display:none隐藏背景；使用 position:fixed 定位脱离文档流并固定；使用z-index:1 指定层级高于文档流；使用 left:0 和 top:0确定相对于父容器的偏移位置；使用百分比宽高继承浏览器窗口；

内容：使用position:absolute 定位将其放在容器上方，使用top、left、transfrom将其居中，不设宽高，由content（HTML元素）将盒子撑开+padding+border

JavaScript实现交互：

获取模态框所在的元素，为控制模态框的按钮添加 onclick事件 / window.οnlοad= function(){ }事件，在函数体中使用 modal.style.display= ‘block’或‘none’ 控制模态框的打开、关闭和反馈提交的逻辑