In this blog post, I am going to show you how to create a full screen overlay.
Say you want to create a full screen popup when you click at a particular web page element, or at any other event you wish. And you wish for the popup to appear and to cover the browser’s full client area. And you also wish for the popup to disappear when you click anywhere on it.
Fear no more, your old pal Dimitrios (Actually, were we ever pals? Really, I mean, have I even met you?) is here to help you.
The first method will be by dynamically creating a div. The second method will be by dynamically creating a canvas. The dynamic div or canvas will have some text and an image displayed on them, to enhancd the educational value of this post and to better showcase the value of these methods.
But which of these two methods should you use? Well, it depends. If you want to include html elements in the popup, then you should definitely use the dynamic div. This is because the hmtl canvas cannot display html elements. You have to draw everything yourself. You have to reinvent the wheel, so to speak. But if you do want to draw everything yourself, then you may use the dynamic canvas method.
Here are both methods, in all their glory, again, by your friend (Honestly, have we ever even just met?) Dimitrios:
Actually, when I began creating these methods, I would use a naive implementation where I did not account for the browser’s resize event. So I had all the code in one function. Thankfully, the implementations I gave above, account for the browser’s resize and scroll events.
I would also use an empty static element (div or canvas) with zero width. But the browsers would account for it ever so slighlty, even if it was empty and of zero length. This had as consequence that the underlying page would be slightly different when the popup disappeared than it was before its apperance. So, I decided to make everything completely dynamic. And, this way, I achieved perfect results.
Another point I would like to draw attention to is the use of “return false;” in the click event in the undelying page. At first I did not include “return false;” and I could not get the popup to appear for more than what it seemed to me like a millisecond or so. Thus, without the “return false;” the popup would appear and disappear immediately. It would not stay at its place and it certainly would not wait for you to click in order for it to disappear. After a lot of thought, I realized that it was because I was directed to a new page (the same underlying page, that was actually reloaded) and to stop this from happening I had to include “return false;” to stop the redirection from happening. “return false;” lets us stay in the same page and it does not reload the page.
The last point I would like to make is for you to notice that I use canvas.width and canvas.height, whereas I use div.style.* and canvas.style.* for everything else, where “*” in this sentence means “any attribute”. But canvas.style.width and canvas.style.height are invalid ways to address these attributes (the width and the height of the canvas). At first, I made this mistake and, again, the canvas would disappear immediately. This time, it was not because the page was reloading, like it happened with the click event. This time, the script would encounter this error and would stop executing.
So, there you have it. I hope we are friends now!