How to implement this cool popup div effect using jQuery?

Question

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?

Answer 1

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: info@herceg.com <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
}

Answer 2

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.