使用HTMLDIV CSS样式 JavaScript实现自定义个性化的模态窗口

01第一节：什么是模态窗口

JavaScript什么是模态窗口，是指当模态窗口弹出来的时候，鼠标不能单击这个对话框之外的区域。一般用于给用户一个提示信息，必须关闭模态窗口之后才可以进行其它的操作。

图1

图1就是一个使用DIV CSS自定义的一个模态窗口，其优点是个性化强，根据系统要求完全自行设计，而系统窗口是无法做到的。

02第二节：CSS 设置

一、 position定位

在CSS样式中，position属性主要用来设置元素的定位。position属性可以设置不同的定位方式，任何元素都可以定位。

绝对定位：是指针对浏览器的窗口位置对模态窗口进行定位，固定在一个位置，不会被其它的元素影响。相对定位：是指模态窗口的位置相对于其它元素而进行定位，会受到其它元素的影响。Position属性的值如下说明：

图2

元素的定位类型说明如下：

static：又称为静态定位，它是position属性的默认值，属于正常定位，也就是对于top/bottom/left/right的设置无效。absolute：又称为绝对定位，它是基于父级别的元素进行定位的，但是该值有两种特殊的情况：A：如果父元素没有使用position属性，则子元素使用position=absolute，子元素的top/left/right/bottom的值是相对于浏览器定位的。

下面我们将父元素和子元素在页面上呈现一下，可清楚的认识它们：

图3

B：如果父元素使用了position属性，则子元素使用了position=absolute， 子元素的top/left/right/bottom的值是相对于父元素定位的。

只要父元素使用了position属性，则子元素就是相对于父元素定位的。

图4

fixed：不管父元素是否使用了position属性，则子元素使用position=fixed都是相对于浏览器进行定位的。relative：在什么情况下都是相对于父元素进行定位的。如果要使一个DIV相对于整个浏览器定位，并且是全屏显示，带背景色，则可以设置如下CSS样式：

运行一下具有背景色的页面：

图5

二、opacity透明

opacity属性是CSS 3版本新增加的属性，用于设置HTML元素的透明度，1表示不透明，0表示完全透明。透明度的设置在0-1之间。例如 opacity=0.5，半透明。

例如：现在给一个div元素设置透明度为30%

运行一下这个设置了页面透明度的页面：

图6

三、 z-index堆叠

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

下面的Html代码设置一下z-index属性：

运行一下具有z-index的页面结果：

图7

03第三节：DIV CSS设置提示窗口

一、整体效果

通过上面对CSS三个属性的设置，则可以通过DIV CSS设置模态提示窗口，效果如下：

图8

当点击保存或提交按钮之后，如果页面上的信息没有通过验证，则会给出提示信息，之前我们直接使用window.alert()来提示，但通过上面的DIV CSS模态提示窗口，更能提升用户的体验。

二、 CSS样式

使用CSS设置模态窗口的完整代码：

三、 HTML代码

将模态窗口的CSS样式应用在Html代码中：

运行一下使用html css设置的模态窗口，其最终的样子如下图所示：

图9

四、 JavaScript代码

使用JavaScript代码来控制DIV CSS模态窗口的显示和隐藏。

04第四节、完整的DIV CSS JS代码

将上面的代码保存到*.html文件中，然后运行一下效果：

图10

在图10中点击保存按钮，就会弹出模态窗口。

图11

在图11中，一个完整的，显示在浏览器窗口中间的模态窗口就出现了。

在这里，我们将DIV CSS设计的一个完整的模态窗口给开发出来了，使用模态窗口可以让系统的提示信息更加美观，且完整自定义和个性化，给用户一个非常棒的用户体验。