javascript - 仅使用 CSS 和基本/纯 javascript 的 Popup Div HTML5

Question

请注意:对于我的网站托管公司，jQuery(非常不幸)对我来说不是一个选项，我无法链接到外部 JS 或 CSS 文件。我的弹出式 div 在我网页的“head”部分包含 CSS 和 JS 代码作为解决方法。

我的问题希望只需要对我现有的 JS 进行简单的更新/调整。就在一周前，我网站上的弹出式 Div(用于联系表格)功能 100% 正确(除了我暂时放弃的 IE 中的 position:fixed 问题)。好吧，我的托管公司刚刚切换到 HTML5(我相信是从“DTD 4.01 Transitional”开始的)，现在我的弹出式 div 在任何浏览器(IE9、FF、Chrome、Safari)中都无法正常运行，有些比其他浏览器更糟糕。

要解决的问题是(请访问我的网站 http://solitairethahalo.com 以查看实际操作):

• 已修复 (所有 4 种浏览器) 我用来格式化联系表单说明/信息的“行高”html 标签不再有效；结果，“Form”div 类现在大于 div 容器高度
• 75% FIXED (Firefox & IE) 定位不正确；弹出窗口出现在屏幕底部，因此只有一小部分弹出窗口的标题可见
• 50% FIXED (所有 4 种浏览器) 我现有的弹出窗口从来没有代码，但我希望弹出 div 在如果可能，调整浏览器窗口的大小

我无法正确粘贴我现有的代码，所以我通过我的网站使其可访问:http://solitairethahalo.com/popupdiv.txt

如果可能，请提供(您可以根据需要给我发电子邮件)我现有代码的修订后的 HTML5 兼容版本。

谢谢!

---

更新:

• 行高:在查找并有了想法之后，我通过简单地更改为 .很高兴这很简单。
• 弹出窗口定位和调整大小:定位错误已通过对我现有代码的轻微调整得到修复。使用下面评论中的 js 代码使我能够在调整窗口大小时获得所需的弹出窗口重新定位。但是，我一直无法使用该代码使模态窗口起作用。所以现在，我已经恢复到我自己的修改后的代码，该代码目前缺少重新调整大小和重新定位的功能，但我仍在努力。

Answer 1

如果您不能使用任何 JS，那么只有一种可能。

你可以做一件事，要么将弹出窗口替换为滑动面板。在“联系人”div 中添加您的弹出式 div。从 CSS3 鼠标悬停在您的“联系人”div 上，使用 css3 转换并将其位置设置为左侧以显示弹出窗口。

这适用于所有浏览器。动画无法在 IE8 或更低版本中运行。