你的jqModal的Overlay位置正确吗？_modal overlay-优快云博客

本文链接：https://blog.youkuaiyun.com/gengv/article/details/5122693

最近在学习jQuery以及一些相关插件，深感ajax的强大，同时也为以前藐视javascript而感到惭愧。有时间一定要系统地恶补一下JavaScript。

今天需要一个JavaScript实现的对话框，正好从网上找到了jqModal，它是jQuery的一个插件。粗粗使用了一下，感觉挺不错的，很便捷。但问题也随之而来了。

症状：

jqModal的overlay在Firefox里表现良好，在IE6里也一些正常。但是在IE8里出现了异常情况。overlay层本应该将原来的页面内容遮住，然后在overlay层上面再显示出对话框div。然而，IE8里，overlay层跑到了原有页面的顶部，而原有页面内容仍然暴露在下面。

这太奇怪了！我又重新看了看jqModal的在线demo，在IE8下面没有表现异常啊？我把demo代码拷贝到本地，存成html，问题重现。真是莫名其妙。于是开始在网上查找治病良方。

费了n久，终于在一篇帖子里找到了答案，赶快记下来，免得以后忘了。原文地址：

http://old.nabble.com/jqModal-Overlay-not-positioned-correctly-td13798239s27240.html

问题原因：

没有使用合适的DOCTYPE声明。需要使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我重新查了jqModal的在线demo，果然使用的是这个声明。我在拷贝的时候，只粘了<html>部分，没粘这里。而MyEclipse自动生成的是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，所以出现异常。

我将正确的声明改好以后，问题解决。我又使用了html的strict dtd声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

也没问题，看来是strict dtd的作用。

现在是知其然了，但还不知其所以然。光寻找这个答案就费了n久，就像帖子里那个老外说的一样：“ It took me ages (well couple of hours) to figure it out. ”

Annoying huh? It took me ages (well couple of hours) to figure it out.
Add this at the beging of your html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now it should work for you...