Jump to content

javascript poup


Recommended Posts

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...