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' });

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

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？

Answer 2

尝试使用outer尺寸：

viewportH = window.outerHeight;

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

2 个答案: