Jump to content
Larry Ullman's Book Forums

Modal Window Question


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.

 

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

 

Thank you everyone.

Jp

 

Link to comment
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:

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.

Link to comment
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

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

Link to comment
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 comment
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

jp

Link to comment
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 comment
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';

:rolleyes:

 

any suggestions please let me know..

jp

Link to comment
Share on other sites

 Share

×
×
  • Create New...