3 May

Darkening Page and set focus on popup window – Javascript

Posted by XtraSimplicity in Website Development | Tags :, , , , |

Ever wanted to make a page darken once you click on a popup? I always have… Until I found the answer today, with the help from a friend of mine, Kelwynsa8.

Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

<script language="javascript" type="text/javascript">
// <!CDATA[

function SignUpForNewsletter()
{
    DarkenPage();
    ShowNewsletterPanel();
}

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';
}

function SignUp()
{
    // hide the newsletter panel
    var newsletter_panel = document.getElementById('newsletter_panel');
    newsletter_panel.style.display = 'none';
    // lighten the page again
    LightenPage();
}

// this function puts the dark screen over the entire page
function DarkenPage()
{
    var page_screen = document.getElementById('page_screen');
    page_screen.style.height = document.body.parentNode.scrollHeight + 'px';
    page_screen.style.display = 'block';
}

// this function removes the dark screen and the page is light again
function LightenPage()
{
    var page_screen = document.getElementById('page_screen');
    page_screen.style.display = 'none';
}

// ]]>
</script>

<style type="text/css">

body
{
 padding:0px;
 margin:0px;
}

#page_screen
{
   background-color:#000000;
   filter:alpha(opacity=80);
   opacity: 0.8;
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   display:none;
}

#newsletter_panel
{
   width:300px;
   height:300px;
   background-color:#FFFFFF;
   border:1px solid #000000;
   position:absolute;
   top:0px;
   left:0px;
}
</style>

</head>
<body>
    <h2>
        <span style="font-family: Trebuchet MS">Blur test&nbsp;
            <input id="Button1" type="button" value="Sign up for newsletter!" onclick="SignUpForNewsletter();" /></span></h2>
    <div id="lipsum">
        <p>
            <span style="font-size: 10pt; font-family: Trebuchet MS"></span>
        </p>
        <p>
            <span style="font-size: 10pt; font-family: Trebuchet MS">
                <img src="image_1.jpg" style="float: left; margin-right: 10px" width="400" />

            </span>
        </p>
        <p>
            <span style="font-size: 10pt; font-family: Trebuchet MS">
                </span>
        </p>
        <p>
            <span style="font-size: 10pt; font-family: Trebuchet MS"> </span>
        </p>
        <p>
            <span style="font-size: 10pt; font-family: Trebuchet MS"></span>
        </p>
    </div>

    <div id="page_screen">
        &nbsp;
    </div>
    <div id="newsletter_panel" style="display:none;">
        Sign up for our
        <h3 style="color:#FF6600;">NEWSLETTER</h3>

        your email address :
        <input type="text" />
        <br />

        <input type="button" value="Sign up!" onclick="SignUp();" />
    </div>

</body>
</html>
You can use the above as a template. :)

Enjoy!