Creating an overlay page for app

javascript, jquery, mobile

Solution

I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.

When the user click the "Help" buttons you change the z-index putting it on the front of the page.

UPDATE Assuming a html layout similar like this:

<html>
<head>...</head>
<body>
 <div id="container">
  <!-- some others divs with the content of the page and the help link -->
  <a href="#" id="help_button">HELP</a>
 </div>
 <div id="over_image"> <!-- add this -->
  <img src="path_to_the_overlapping_image" alt="overlap image" />
 </div>
</body>
</html>

A default CSS like this

div#container {
 z-index: 100;
}

div#over_image {
 z-index: -100; // by default the over image is "behind" the page
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%; // or puts the width/height of the "screen" in pixels
 height: 100%;
}

div#over_image img {
 width: 100%;
 height: 100%;
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
}

And at the end the jQuery function

$("a#help_button").on("click", function(event){
 event.preventDefault(); // it's not really a link
 $("div#over_image").css("z-index", "1000");
})

You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:

$("div#over_image img").on("click", function(){
 // when the user click on the overlap image, it disappears
 $("div#over_image").css("z-index", "-100");
})

I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.

SOME REFERENCES

- Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp

- jQuery css: http://api.jquery.com/css/

Problem

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes. What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.

Original source