使用Javascript / jQuery的 - 如何建立一个适当的模式页叠加(javascript

我一直在挣扎了几个星期建立在JavaScript / jQuery的模态对话框。在iOS和Android设备，我得到相当一致的，工作的结果 - 但是，在Windows Mobile / Opera移动/等，模态的大小永远不会似乎是相当正确的 - 无论是我得到过多的滚动或对话框太短等背景在页面的底部下方显示出来。我需要的最佳途径找出大小模态（和调整对设备方向变化）。

这是我在做什么目前：

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（称为ON设备方向变化和初始页面加载）

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

<div class="make_me_a_dialog">Content of div</div>    
<script type="text/javascript">
    $(document).ready(function() {
        $('.make_me_a_dialog').dialog({ bgiframe: true,
            height: 200,
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            }                
        });
    });        
</script>

编辑

你是否尝试过使用window.availHeight代替window.innerHeight ？