Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Jaepee

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

 

Share this post


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:

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.

Share this post


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

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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

jp

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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.

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

Loading...
Sign in to follow this  

×
×
  • Create New...