All geek questions in one place

Creating an overlay page for an application

I am learning how to add a single page overlay when a user clicks the Help button in my web application. Below is an example of what I want to achieve

single page overlay

I have jquery mobile implemented on my pages using javascript. I looked at the jquery mobile popups that overlay the page, but that won't serve my purpose.

What resources, libraries, language, etc. I will do? I tried Google, but I get unulocal results.

+4
source share
1 answer

I have not tried, but you can put the background in a div, leaving it behind the classic background (using the low css z index) with a fixed position (absolute position), fixed width / height (100% / 100%) and opacity.

When the user clicks the Help buttons, you change the z-index by placing it at the top of the page.

UPDATE
Suppose the html layout looks 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>

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 not really a link $("div#over_image").css("z-index", "1000"); })

You must also implement the “hide” function to “reset” the matching image with some action, perhaps 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 have not tried, maybe there are a few things that need to be changed to make it work correctly, but it's a good place to start.

SOME LINKS

+4
source

Source: https://habr.com/ru/post/1499667/

More articles:


All Articles