Darken the page and set focus on the user input

Since the ajax/atlas days came into the play lot’s of times we need a simple input from user and don’t want to redirect user to another page. The obvious question is how to show user that his input is necessary and stay at the same page…

This is a trick I’ve seen on several web sites and I just adore it. I don’t know how other people do it, but here is my version of it.

Personally, I’ve used it while developing the upcoming version 4 of reBlogger to allow users to insert their comments on post, without leaving the page where they were reading the post.

EXAMPLE : First image is showing the page in normal mode. Second image is that same page, but user is prompted for input (her email address in this particular case). This an imaginary example, so don’t go to reblogger.com and try to see it working 🙂

Darken the page and set focus on the user input

So the basic idea here is that you have one div element that you’ll use as a screen (it’ll darken the page) and obviously, you can have any number of input panels that you’ll show when the main page darkens.

You’ll be using the same DarkenPage() javascript function every time you need some input from user and then you would show the input panel (another div element).

Let me just briefly explain the function that shows the input panel here :

function ShowNewsletterPanel()
var newsletter_panel = document.getElementById('newsletter_panel');
// w is a width of the newsletter panel
w = 300;
// h is a height of the newsletter panel
h = 300;
// get the x and y coordinates to center the newsletter panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
newsletter_panel.style.left = xc + "px";
newsletter_panel.style.top = yc + "px";
newsletter_panel.style.display = 'block';

As you can see we are first determining the coordinates that will center our input panel on the page. The width and height of the update panel can be changed to whatever suits your needs, but bear in mind that you need to change those values in CSS as well as in this function.

For the dark screen itself, the trick is to use

opacity: 0.8;

in css. The two values are here because of the browser issues. Obviously 100 is no opacity at all and 0 is complete opacitiy (the element is invisible). Feel free to play with those values until you find something you like.

Here is the link from reBlogger lab where you can download the HTML page example.

This blog is being delivered to you by
“Do you know what your employees are blogging about?”


45 Responses to “Darken the page and set focus on the user input”

  1. Sliding Task Lists project (day 3) – using ModalPopup extender to create panels for adding new tasks « Coding Atlas Says:

    […] For people that read this blog for some time now, you may remember the post “Darken the page and set focus on the user input”. Ok here is a better/quicker solution and it’s called ModalPopup extender. Like the saying goes: live and learn! […]

  2. Clark Says:

    You say that you set the focus of the user input textbox, but I don’t see the code that does this. When I run the sample page, it indeed does not set the focus to the user input. I can’t find anywhere on the web how to do this, and I was hoping you knew!


  3. branden Says:

    I made this change. On my site…I had the annoying IE select tags that don’t go away.


    Select tags will not show through iframes tags, but will through div tags.
    You see anything wrong with using iframe instead of div. All initial tests seem to work.

  4. branden Says:

    Ah…the html didn’t seem to post. What is missing from the above post is that I simply replaced div with iframe in the example provided. (when id equals page_screen).

  5. Jason Antman Says:

    Ahhh! reBlogger.com has gone away, and taken all of the code with it!

    On a side note, you have the wording about opacity switched in the last line. 100% opacity is *full* opacity, i.e. it displays normally, and is not transparent. 0% opacity is no opacity, i.e. full transparency, i.e. invisible.

  6. xjlwrhnqi irduebsj Says:

    lfbky czgxbhnjd yxwdvbpr gofxnu acuxznov erxgmkq xlsfpbyt

  7. Asian Physical Map Says:

    ezdl kehjg anmftbj gydnat

  8. John Says:

    Thanks for the info.

  9. Creating a CSS and JavaScript Overlay Window – Sammaye's Blog Says:

    […] the reader to create CSS div overlay dialogues using JavaScript. This tutorial was taken from another blog, however, since I first visited the blog it has lost most of the tutorial. I had to revisit a […]

  10. Creating a JavaScript Overlay Window « Sammaye's Blog Says:

    […] the reader to create CSS div overlay dialogues using JavaScript. This tutorial was taken from another blog, however, since I first visited the blog it has lost most of the tutorial. I had to revisit a […]

  11. Gunjan Says:

    i need help..
    i m not able to get the sample code from Reblogger.com.
    how to get there?

  12. Mike Nealon Says:

    I was wondering if there is a way to put a video in the pop up.
    I have been looking around for the answer to this for a long time and I just now found this post. It’s exactly what I was looking for, except I want a video to play and then have it fade back into the site when the video ends.

    Let me know!

  13. Zeeshan Umar Says:

    Nice tip, thanks for sharing

  14. drat2000 Says:

    Where i can download the code? Your url are not working now.. Thanks

  15. Aurelien Says:

    Yeah – bugger!! I would like it too 😦

  16. Peggy Says:

    Your “about us” and “privacy policy” pages do not disappear on reblogger.com. You are missing this last line of code from your javascript:

    function modalAbout(){
    wndwAbout = window.open(‘/aboutus’,’wndw_about’,’width=520,height=400,left=250,top=250,menubar=no,status=yes,toolbar=no,scrollbars=yes,resizable=yes’);
    wndwAbout.onblur = wndwAbout.close
    function modalPrivacy(){
    wndwAbout = window.open(‘/PrivacyPolicy.html’,’wndw_privacy’,’width=520,height=400,left=250,top=250,menubar=no,status=yes,toolbar=no,scrollbars=yes,resizable=yes’);
    wndwPrivacy.onblur = wndwPrivacy.close

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: