javascript/jquery-如何创建适当的模式页面覆盖 [英] javascript / jquery - how to create a proper modal page overlay

问题描述

我已经苦苦挣扎了几个星期，用javascript/jquery创建模式对话框.在ios和android设备上，我得到了相当一致的工作结果-但是在Windows Mobile/Opera Mobile/等等中，模态的大小似乎从来都不是很正确-要么我滚动过多，要么对话框太短，因此背景下面页面的底部显示在底部.我需要找出调整模式尺寸的最佳方法(并根据设备方向的变化来调整尺寸).

I've been struggling for a couple weeks creating a modal dialog in javascript / jquery. On ios and android devices I get pretty consistent, working results - but in windows mobile / opera mobile / etc, the size of the modal never seems to be quite right - either i get excessive scrolling or the dialog is too short and so the background of the page beneath shows through at the bottom. I need to figure out the best way to size the modal (and resize on device orientation change).

这是我目前正在做的事情:

This is what I'm doing currently:

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(根据设备方向更改和初始页面加载而调用)

JAVASCRIPT (CALLED ON DEVICE ORIENTATION CHANGE AND INITIAL PAGE LOAD)

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

我需要确保对话框始终至少与视口一样高，但又要足够高以覆盖其下面的所有内容.如果有人对本教程或教程有任何最佳实践，我可以签出或进行其他任何检查，不胜感激.谢谢！

I need to make sure that the dialog is always at least as high as the viewport, but also tall enough to cover any content below it. If anyone has any best practices on this or tutorials I can check out or anything, that'd be appreciated. Thanks!

推荐答案

我建议您看一下 jQuery UI对话框.

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

Here's a link to download the jQuery UI library:
http://jqueryui.com/download

这是一篇介绍如何使对话框变为模态的文章:
http://geekswithblogs.net/liammclennan/archive/2009/11/01 /135934.aspx

Here's an article that explains how to make the dialog modal:
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吗?

这篇关于javascript/jquery-如何创建适当的模式页面覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！