Javascript / Jquery - How To Create A Proper Modal Page Overlay

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

Solution 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

<divclass="make_me_a_dialog">Content of div</div><scripttype="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?

Solution 2:

Try using the outer dimensions:

viewportH = window.outerHeight;