SIVANANDA REDDY GANGIREDDY: A Very Simple PopUp Box DIV

We'll create an html file, in my case I named it index.html...

<html>
<head>
<title> Popup Box DIV </title>
</head>
<body>
<div id="popup_box">    
    <h1>This IS A Cool PopUp</h1>
    <a id="popupBoxClose">Close</a>
</div>
<div id="container"> 
    <h1>sample</h1>
</div>
</body>
</html>

Then, for our css style, we have following:
Noticed the display:none on the popup_box's syle? That is important.

You just have to paste the above codes right after this title tag...

<title> Popup Box DIV </title>

Then, last but not the list, our Popup Box using pure JQuery: (Just insert these codes after the css style.)
Here we just utilized the fadeIn and fadeOut functions to make the popup box work.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready( function() {

        // When site loaded, load the Popupbox First
        loadPopupBox();

        $('#popupBoxClose').click( function() {
            unloadPopupBox();
        });

        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style
                "opacity": "1"
            });
        }

        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "0.3"
            });
        }
    });
</script>

That's it. We are DONE!!! Hope you like my simple tutorial...

SIVANANDA REDDY GANGIREDDY

Pages

Friday, January 20, 2012

A Very Simple PopUp Box DIV

No comments:

Post a Comment