javascript / jquery - how to create a proper modal

问题:

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 (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!

回答1:

I would suggest taking a look at the jQuery UI Dialog.

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

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>

EDIT

Have you tried using window.availHeight instead of window.innerHeight?

回答2:

Try using the outer dimensions:

viewportH = window.outerHeight;