js模态弹窗

一.实现弹窗原理：

弹窗的实现：

(1)先写出一个div，弹出窗的样式，然后使用display样式进行隐藏；

(2)当点击登录时，弹出窗口，这时display样式变为block

(3)遮罩层的实现，使用一个div，让它占据整个屏幕，刚开始时隐藏，当点击登录时，遮罩层的display样式变为block,只是设计时，让遮罩层的z-index的值，小于弹窗的Z-index值，确保弹窗在屏幕的最上层。

(4)弹窗位置的实现中，还使用了document.documentElement.clientHeight，document.documentElement.clientWidth，来实现随着屏幕大小的变化，使弹框始终位于屏幕的中间位置。

二.具体实现：

html代码如下：

css代码：

js代码如下：

三.效果图展示

初始页面



点击页面登录：弹出窗口页面如下：



四.总结

弹窗的是实现其实很简单，就是用display属性就可以解决，遮罩层也是控制其css属性，就可以实现。还有一点没有实现java培训，就是弹窗会随着鼠标进行移动，这个在后续的学习中继续完成。