javascript/jquery - 如何创建合适的模态页面覆盖

Question

在 javascript/jquery 中创建模态对话框我已经苦苦挣扎了几个星期。在 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' });

我需要确保对话框始终至少与视口(viewport)一样高，但也要足够高以覆盖其下方的任何内容。如果有人对此有任何最佳实践或我可以检查的教程或任何东西，那将不胜感激。谢谢!

Answer 1

我建议看一下 jQuery UI Dialog .

这是下载 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？