Modal Window Question

[Jaepee]

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.

 

http://blure.com/sharE/?b_id=10&img=VMpzXeAm9sc7.jpg

 

Thank you everyone.

Jp

 

[HartleySan]

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:

document.body.offsetHeight

 

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.

[Jaepee]

Thank You HartleySan!

 

You have pointed me in the right direction!

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

alert(document.body.offsetHeight);

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

Thanks

jp

[HartleySan]

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).

[Jaepee]

Your right Hartley San

I had an error in my css code for body: I had it set for auto

changed it to 100% that seemed to have fixed the problem.

Thank You

jp

[Jaepee]

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

jp

[HartleySan]

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.

[Jaepee]

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..

jp

[HartleySan]

I use this for getting browser dimensions:

http://stackoverflow.com/a/11744120/1992973

 

And I'd reference the following for an efficient way to handle onscroll:

http://ejohn.org/blog/learning-from-twitter/