javascript - How to implement this cool popup div effect using jQuery? - Stack Overflow

When you click the icon on the page 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?

When you click the icon on the page http://www.mansory./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?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 7, 2013 at 2:32 josh kuglerjosh kugler 9522 gold badges22 silver badges1111 bronze badges 3

• They used mechanism in which they default make the popup ul display:none and when you click on any link using jquery it add any class say hovering and add css for that class is li.hovering li.innermost – Arpit Srivastava Commented Jan 7, 2013 at 2:37
• 1 Fire a reveal modal. – The Alpha Commented Jan 7, 2013 at 2:42
• start by looking in browser console at the element css when it is shown and when hidden...will give you a lot of the clues right there. Can often see the live animation css changes also... at least in Firebug you can – charlietfl Commented Jan 7, 2013 at 2:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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. <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
}

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.