Jump to content
Larry Ullman's Book Forums

Ch9: Modal Dialog Mask Issue


Recommended Posts

Hi Larry and forum users.

 

I just got 'Modern Javascript' and am eager to get stuck into it. I need to implement a modal dialog quickly for a project I'm working on, however, and am having an issue I don't know how to resolve.

 

The modal dialog as discussed in ch.9 contains just a little text. Mine, however, will be used to display a comprehensive list of terms and conditions of several hundred words.

 

The problem is that when the user scrolls the page down through the terms and conditions, the light-grey modal mask background does not expand. You can see the problem here.

 

What can I do to get the mask to fill the entire browser window when the user scrolls down?

 

And one more thing... What if the user has javascript turned off. Can I simply link to a page in the href tag as a fallback?...

 

Thanks in advance for your help.

Link to comment
Share on other sites

peppericious1, that's a good-looking site template you have going at the moment. I hope your site turns out the way you want it.

 

Normally, I think the mask you are talking about is called an "overlay div". If you do a Web search with that term, you will undoubtedly find lots of relevant links.

 

To be more specific though, you need to dynamically set the height of the overlay div using a JS property. The following will give you the height of the entire page, regardless of the browser:

 

document.body.clientHeight

 

Simply set the height of the overlay div to that, and you're good to go. I should point out that I use IE6 at work, and when I looked at your site from IE6, the ToS weren't centered, and I couldn't see any overlay div at all. On Chrome at home, I was able to reproduce the problem you speak of though.

 

To answer your other question, you are exactly right in that you use the normal href attribute as a fallback. Generally, when you set up a JS event to handle an anchor tag mouse click, you want to end the function called by the event handler with "return false". That way, if JS is enabled, the JS solution will kick in, and the browser's default behavior will be suppressed.

 

Of course, if JS is not enabled, then the normal href link will be followed.

 

Hope that helps. Please let us know if you need any additional assistance.

  • Upvote 1
Link to comment
Share on other sites

The following will give you the height of the entire page, regardless of the browser:

 

document.body.clientHeight

 

Simply set the height of the overlay div to that, and you're good to go.

 

Thanks, HartleySan, for your kind comments about the site and for your help which is very informative.

 

However, when you say 'Simply set the height of the overlay div...', could you tell me exactly how I should do that?... As yet, I have not done *any* js coding (hence my purchase of Larry's book), so a couple of pointers would be much appreciated.

 

TIA

Link to comment
Share on other sites

Chapter 9 does explain how to set CSS properties using JavaScript. Also, just to confirm, have you read the first eight chapters?

 

... so that's what I have to do - to change the height of the modal mask div by referring to document.body.clientHeight as HartleySan suggested, is that right?

 

No, I have only flicked through the table of contents thus far as I only received your book on Thursday of last week. I was working on the project above before the book arrived and must get it off my desk before I can dig in to the book...

Link to comment
Share on other sites

Sorry to not fully answer your question. I was kind of assuming that you knew how to make the actual assignment.

As an example, if you have a div in your HTML with an ID of "overlay", you could do something like the following:

 

var overlayDiv = document.getElementById('overlay');

overlayDiv.style.height = document.body.clientHeight;

 

That should work.

  • Upvote 1
Link to comment
Share on other sites

Sorry to not fully answer your question. I was kind of assuming that you knew how to make the actual assignment.

As an example, if you have a div in your HTML with an ID of "overlay", you could do something like the following:

 

var overlayDiv = document.getElementById('overlay');

overlayDiv.style.height = document.body.clientHeight;

 

That should work.

 

That's great, HartleySan, thanks. I'll give it a go right away and if I'm still in trouble, will post back.

 

p.s. I see from your signature that you're in Japan... I lived in the south of Honshu for 2 years back in the early 90s… a wonderful time. Mata ato de, ne!

Link to comment
Share on other sites

 Share

×
×
  • Create New...