[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

How to Create a Modal to Cover Entire Web Page using CSS and JavaScript

Posted on 2012-03-27
2
Medium Priority
?
931 Views
Last Modified: 2012-08-14
I am new to web developing, and I was wondering how one would create a modal over an entire web page. The goal is to grey out the entire contents of the web page, coded in asp .net, and make a custom message box popup using JavaScript code. (I have attached the code for the basic *.aspx page for reference.) Could someone let me know what would be the basic method and the basic code, maybe illustrated with an example, to grey out an entire page and make a modal window appear on the page, without being a JavaScipt popup window, on the same page? Any help would be greatly appreciated.
healthRiskTerms.aspx
0
Comment
Question by:thenthorn1010
1 Comment
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 2000 total points
ID: 37773745
With only CSS this is quite tricky, because those Javascript lightbox/thickboxes also have some cross-browser fixes in it.

For example the way Firefox renders the opacity is different than in Internet Explorer and don't forget about all those older browser versions like IE6, IE8, quirksmode etc

If you want to use CSS for fixing everything is a lot of work, the javascripts versions do these checks and fixes for you based on the browser that visits your website.

The modal dialogs i use are these:

http://jqueryui.com/demos/dialog/
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
http://www.shadowbox-js.com/

My advice, use a javascript version it's more bulletproof. And it some much easier to maintain and use it for other purposes on your website, like loading an image in the dialog box or video, iframe and so on.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question