javascript / jquery – 如何创建正确的模态页面叠加层

我一直在苦苦挣扎几周，在javascript / jquery中创建一个modal dialog。 在ios和Android设备上我得到了相当一致的工作结果 – 但是在windows mobile / opera mobile / etc中，模态的大小似乎从来都不对 – 要么我得到过多的滚动，要么对话太短，所以后台下面的页面显示在底部。 我需要找出调整模态大小的最佳方法（并调整设备方向更改的大小）。

这就是我目前正在做的事情：

CSS

#dialog { left: 0; top: 0; right:0; bottom: 0; position:absolute; z-index:4; color: #424242; font-size:14px; display:none; background: -moz-linear-gradient(#35848b, #6dbcc9); background: -ms-linear-gradient(#35848b, #6dbcc9); background: -o-linear-gradient(#35848b, #6dbcc9); background: -webkit-linear-gradient(#35848b, #6dbcc9); } 

JAVASCRIPT（呼吁设备方向更改和初始页面加载）

 viewportW = window.innerWidth; viewportH = window.innerHeight; $j('#dialog').css({'min-height' : viewportH+'px' }); 

我需要确保对话框始终至少与视口一样高，但也足够高以覆盖它下面的任何内容。 如果有人对此或教程有任何最佳实践，我可以检查或任何东西，这是值得赞赏的。 谢谢！

Answer 1

我建议看一下jQuery UI对话框 。

这是下载jQuery UI库的链接：
http://jqueryui.com/download

这是一篇解释如何进行对话模式的文章：
http://geekswithblogs.net/liammclennan/archive/2009/11/01/135934.aspx

 
Content of div
  

编辑

您是否尝试过使用window.availHeight而不是window.innerHeight ？

Answer 2

尝试使用outer尺寸：

 viewportH = window.outerHeight;