javascript poup

[Jordan Tekelenburg]

i am trying to create a javascript like below

https://twitter.com/mynewlife_pr/status/687464624061595648

Any help would be great

jordan

[dustbyter]

Looking at the image you provided, I don't think that is Javascript, or it can be driven by javascript, but I think its a div tag that is hidden and displayed when required.

[Jordan Tekelenburg]

if it not javascript does anyone know how to do it

jordan

[cooper]

Could you clarify what it does? All I see is a static image with a bunch of buttons.

[sud0nick]

if it not javascript does anyone know how to do it

jordan

Well, much like the new Pineapple interface it looks like it's using bootstrap, which would make sense because Twitter made bootstrap. They may also be using AngularJS to display it which wouldn't require you to write any JavaScript yourself but would require the Angular framework. If you just want an overlay that can be hidden and shown in a similar fashion you need to what dustbyter said and create a div like so:

<div id="myModal" style="display: none">
 My HTML stuffs
</div>

Then you would create a button to toggle the div.

<button type="button" id="toggleDiv">Toggle</button>

Then, if you use jQuery, you can easily connect the button to a function that fades the modal when clicked.

$('#toggleDiv').on('click',function(){
    if (divIsShown) {
        $('#myModal').fadeOut('slow');
        divIsShown = false;
    } else {
        $('#myModal').fadeIn('slow');
        divIsShown = true;
    }
});

You would need to include the divIsShown variable in your JS code to keep track of which position the toggle state is currently in but this should be straightforward enough to get you started.

The way that modal in your link works (by fading and sliding down) is based on code in Bootstrap but you may be able to get a similar effect by using the jQuery slideDown() and slideUp() functions.