Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hi everybody! hope all is well.


So I have made a modified modal window(using Larry's example) and it works great except on my iPad (kinda).

The modal is a confirmation window and the mask background area is not covered completely. If a user scrolls up the background is exposed.


Does anyone have a suggestion on how to remedy this. You can see a picture of what i am talking about below.




Thank you everyone.



Link to post
Share on other sites

Make sure you're using a CSS reset on the html and body elements to reset any potential default margins and padding, etc., and then use the following property to assign a height to the masking div:



That should work because the document.body.offsetHeight property returns the height of the entire page, not just the currently displayed height of the window.

Link to post
Share on other sites

Thank You HartleySan!


You have pointed me in the right direction!

Although I'm having another issue. When I run firebug to test


It pops up at only 38 on my page. I don't know what the problem is but I'm investigating.



Link to post
Share on other sites

Is the height of the body of your page actually only 38 pixels?

You could easily run a test where if document.body.height is not greater than the height of the displayed window (i.e., there's no vertical scroll bar), then you use the height of the displayed window for the overlay transparent div instead.

If, instead, this issue is something you're only experiencing in Firefox, then you'll have to ensure that 1) your HTML/CSS is sound and valid so that they're interpreted universally the same in all browsers, and 2) there isn't some cross-browser issue where document.body.offsetHeight doesn't work right in Firefox (sorry, I don't know myself without some further testing).

Link to post
Share on other sites

Update I added the following code to fix the problem with firefox

, unfortunately have not found a remedy for safari :(

window.onscroll = function(){
 var pn = document.body.parentNode.scrollHeight;
 document.getElementById('modalMask').style.height = pn +'px';

maybe not the best way to do it, but it worked.

I'll keep on trying for safari..

Running Mac OSX 10.7.5

FireFox Mac 15.0.1

Safari 5.1.7


Link to post
Share on other sites

I've done before what you're trying to achieve now, and here are my general recommendations for how to approach this:

1) Set the height of the overlay div once (as we talked about above), and don't change the value after that.

2) For the onscroll event, only move the div that should be centered (or whatever) on-screen at all times.


Do that, and you should be fine.

  • Upvote 1
Link to post
Share on other sites
  • 1 year later...

Just an update on this post ... I have been working on an object that I think has finally covered most browsers to get the modal mask to correctly fit on any screen dimensions.

var v = { // view object
    h : function(){
        var hi = window.innerHeight;
        if (typeof hi != 'number'){
            if (document.compatMode == "CSS1Compat"){
                this.hi = document.documentElement.clientHeight;    
            } else {
                this.hi = document.body.clientHeight;
        return hi;
    w : function(){
        var wi = window.innerWidth;
        if (typeof wi != 'number'){
            if (document.compatMode == "CSS1Compat"){
                this.wi = document.documentElement.clientWidth;
            } else {
                this.wi = document.body.clientWidth;
        return wi;

var win_x = v.w(), win_y = v.h();

use variables to style your css as needed e.g.

document.getElementById('modalMask').style.height = win_y +'px';
document.getElementById('modalMask').style.width = win_x +'px';



any suggestions please let me know..


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...