什么是模态窗口，是指当模态窗口弹出来的时候，鼠标不能单击这个对话框之外的区域。一般用于给用户一个提示信息，必须关闭模态窗口之后才可以进行其它的操作。
图1就是一个使用DIV+CSS自定义的一个模态窗口，其优点是个性化强，根据系统要求完全自行设计，而系统窗口是无法做到的。
在CSS样式中，position属性主要用来设置元素的定位。position属性可以设置不同的定位方式，任何元素都可以定位。
绝对定位：是指针对浏览器的窗口位置对模态窗口进行定位，固定在一个位置，不会被其它的元素影响。相对定位：是指模态窗口的位置相对于其它元素而进行定位，会受到其它元素的影响。Position属性的值如下说明：
static：又称为静态定位，它是position属性的默认值，属于正常定位，也就是对于top/bottom/left/right的设置无效。absolute：又称为绝对定位，它是基于父级别的元素进行定位的，但是该值有两种特殊的情况：A：如果父元素没有使用position属性，则子元素使用position=“absolute”，子元素的top/left/right/bottom的值是相对于浏览器定位的。
fixed：不管父元素是否使用了position属性，则子元素使用position=“fixed”都是相对于浏览器进行定位的。relative：在什么情况下都是相对于父元素进行定位的。如果要使一个DIV相对于整个浏览器定位，并且是全屏显示，带背景色，则可以设置如下CSS样式：
opacity属性是CSS 3版本新增加的属性，用于设置HTML元素的透明度，1表示不透明，0表示完全透明。透明度的设置在0-1之间。例如 opacity=0.5，半透明。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
当点击“保存”或“提交”按钮之后，如果页面上的信息没有通过验证，则会给出提示信息，之前我们直接使用window.alert()来提示，但通过上面的DIV+CSS模态提示窗口，更能提升用户的体验。
在这里，我们将DIV+CSS设计的一个完整的模态窗口给开发出来了，使用模态窗口可以让系统的提示信息更加美观，且完整自定义和个性化，给用户一个非常棒的用户体验。
