CODEWITHSUNDEEP
javascriptjqueryhtmlcss
josh kugler
josh kugler

Reputation: 95

How to implement this cool popup div effect using jQuery?

When you click the icon on the page http://www.mansory.com/en/dealers you will find a div pops up displaying some information. I just cannot figure it out how they did the effect using css/jQuery things. What is the mechanism of the effect?

Upvotes: 0

Views: 15301

Answers (2)

phnkha
phnkha

Reputation: 7892

This mechanism is called animation. They simply show/hide the div and continuously change the position of the popup.

See more at http://api.jquery.com/animate/

I make a simple demo here

HTML:

<div class='container'>
    <button id="btnShow">Show</button>
    <div class='menu' style='display: none'>
        <button id="btnHide">Close</button><br/>
        Ernst-Heinkel-Strasse 7,<br/>
        DE-71394 Kernen i.R. Germany<br/>
        Contact <br/>
        Telefon: 07151 / 994 64 -0<br/>
        Fax: 07151 / 994 64 -22<br/>
        www.herceg.com <br/>
        email: [email protected] <br/>
    </div>
</div>

JS: 

$(document).ready(function(){
    $('#btnShow').click(function(){
        $('.menu').show().css("top", "400px").animate({top: 50}, 200);
    });

    $('#btnHide').click(function(){
        $('.menu').hide();
    });
});

CSS:

.container {
    with: 400px;
    height: 300px;
    border: 1px solid black;
}

.menu {
    position: absolute;
    border: 1px solid black;
    background: #fff;
    left: 180px
}

Upvotes: 3

Chris Montgomery
Chris Montgomery

Reputation: 2354

They simply show/hide a div and position it absolutely over top the page. Take a look at the div with the id infobox and you'll see all the css needed to do this. Inside of infobox is all the text for the different countries already, each one surrounded by a div with the property display:none. Depending on what country you click on they will change the display property to block on the corresponding div and display:none on all the rest.

Upvotes: 0

Related Questions