Saturday, March 9, 2013

Open PopUp using jquery css and jqeury code.

This is the open popup code using jquery with appplying css .this is a very simple and attractive pop up window just applied on div.

 $(document).ready(function () {
        $('open').click(function () {
            alert('hi');
            load();
        });

        $('.close').click(function () {
            unload();

        });
    });


 function unload() {    // TO Unload the Popupbox

        $('.popup').fadeOut("slow");
        $("#container").css({ // this is just for style      
            "opacity": "1"
        });
    }

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

    }


style type="text/css"
    .popup {
        display: none; /* Hide the DIV */
        position: absolute;
        _position: absolute; /* hack for internet explorer 6 */
        height: 325px;
        width: 325px;
        background: #FFFFFF;
        left: 80px;
        top: 100px;
        z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
        margin-left: 15px;
        /* additional features, can be omitted */
        border:2px solid #ff0000;
        padding:15px;
        font-size: 15px;
        -moz-box-shadow: 0 0 5px #ff0000;
        -webkit-box-shadow: 0 0 5px #ff0000;
        box-shadow: 0 0 5px #ff0000;
     
    }
 
    #container {
        width: 100%;
        height: 100%;
    }

    a {
        cursor: pointer;
        text-decoration: none;
    }

    /* This is for the positioning of the Close Link */
    #popupBoxClose {
        font-size: 20px;
        line-height: 15px;
        right: 5px;
        top: 5px;
        position: absolute;
        color: #6fa5e2;
        font-weight: 500;
    }
   /style

No comments:

Post a Comment