僅使用CSS和基本/純JavaScript彈出Pop Div HTML5

Question

請注意：對於我的網站托管公司，jQuery（非常不幸）對我來說不是一種選擇，我無法鏈接到外部 JS或CSS文件。 解決方法是，我的彈出div在網頁的“標題”部分中包含CSS和JS代碼。

希望我的問題只需要對現有JS進行簡單的更新/調整即可。 就在一周前，我網站上的彈出式Div（用於聯系表格）運行了100％正確的功能（除了position：我暫時放棄的IE中已解決的固定問題）。 好吧，我的托管公司剛剛切換到HTML5（我相信是從“ DTD 4.01 Transitional”開始的），現在我的彈出式div在任何瀏覽器（IE9，FF，Chrome，Safari）中都無法正常運行，有些比其他瀏覽器差。

要解決的問題是（請訪問我的網站http://solitairethahalo.com以查看實際操作）：

• 已修復 （所有4個瀏覽器） “ line-height” html標記，我用來格式化聯系表說明/信息的格式不再有效； 結果，“ Form” div類現在大於div容器的高度
• 75％固定 （Firefox和IE）定位不正確； 彈出窗口顯示在屏幕底部，因此僅彈出窗口標題的一小部分可見
• 已修復50％ （所有4種瀏覽器），我現有的彈出窗口從未使用過代碼，但是我希望彈出窗口div盡可能在調整瀏覽器窗口大小時保持居中/固定

我無法正確粘貼現有代碼，因此可以通過我的網站進行訪問： http : //solitairethahalo.com/popupdiv.txt

如果可能，請提供（您可以根據需要向我發送電子郵件）我現有代碼的HTML5兼容修訂版。

謝謝！

---

更新：

• 行高：查找並獲得想法后，我通過簡單地更改為來解決了問題。 很高興這很簡單。
• 彈出窗口的定位和大小調整：通過對現有代碼進行少許調整即可解決定位錯誤。 在下面的注釋中使用js代碼可使我在調整窗口大小時獲得所需的彈出窗口重新定位。 但是，我無法使用該代碼來創建模態窗口功能。 因此，到目前為止，我已經恢復到自己的修改后的代碼，該代碼目前缺少調整大小的重新定位功能，但我仍在努力。

Answer 1

如果您不能使用任何JS，則只能以一種方式使用它。

您可以做一件事，要么彈出，要么將其替換為滑動面板。 將彈出式div添加到“聯系人” div中。 從CSS3的“聯系人” div鼠標懸停起，使用css3過渡並將其位置設置為左側以顯示彈出窗口。

這將適用於所有瀏覽器。 動畫無法在IE8或更低版本中使用。