文件名称：simple-modals:使用香草JS创建git模态的非常基本的方法
文件大小：5KB
文件格式：ZIP
更新时间：2024-06-14 13:50:35
HTML
简单模态 使用html，css和vanilla JS创建模态的非常基本的方法。 通常的想法是创建一个绝对定位的div，并在页面上所有其他内容的上方添加一个z-index。 弹出版本使用叠加层（div）覆盖了模态背后的所有内容。 我们希望此叠加层位于我们的模式和页面的其余部分之间，因此我们需要将z-index设置为大于0，但在z-index下我们指定模式。 这样可以确保在启动模式后，页面上的所有功能都关闭。 （当然，它不是真的“关闭”只是无法访问/无法点击，因为我们用覆盖层div完全覆盖了它） 通过将背景设置为黑色并降低不透明度，我们可以创建灰色效果。 在我们的JS文件中，我们可以将点击事件监听器添加到叠加层中，从而将模式和叠加层的“显示”更改为“无”。 此功能可以重新用于我们的“关闭”按钮。
【文件预览】：
simple-modals-main
----modal_popup()
--------index.html(4KB)
--------script.js(655B)
--------style.css(1KB)
----modal_fullscreen()
--------index.html(478B)
--------script.js(376B)
--------style.css(995B)
----README.md(956B)