CODEWITHSUNDEEP
javascriptcss
Tepken Vannkorn
Tepken Vannkorn

Reputation: 9723

Don't know what this popup is called

I want to make a popup like this. The image will pop up when the user click on its above button. enter image description here

Actually, i don't really know what it is called so that i can't find links to help me to do this.

So any links or help would be very much appreciated.

Thanks.

Upvotes: 0

Views: 104

Answers (4)

Dipak
Dipak

Reputation: 12190

Check the code here - http://jsfiddle.net/h7pxU/

You can do the same by simply toggling/show hide div

$('.link').click(function(){
    $('.popup').toggle();
});

The .popup needs to be with position: absolute and its parent must have position: relative

Hope this helps!

Upvotes: 1

Zeta
Zeta

Reputation: 105895

This is a very basic demo, it uses plain JavaScript without any libraries. Please notice that document.querySelector and addEventListener aren't implemented in IE prior version 9, so you may want to use jQuery or another JS-Framework.

HTML

First of all, you need the correct structure. You'll need a wrapper, the button, and the menu:

<div class="menuwrapper">
    <button>Click me!</button>
    <div class="menu">
        <label><input type="checkbox"> Auto-save this page</label>
        <label><input type="checkbox"> Make this page private</label>
        <label><input type="checkbox"> Hide notifications</label>
    </div>
</div>

CSS

Now we need to style those elements

.menuwrapper{
    overflow:none;
    position:relative; // this will have an effect on the absolute position later on
}
.menuwrapper > button{
   border: 1px solid;  // style the way you want it
}

.menuwrapper > div{
   border: 1px solid;  // again, style the way you want it
   display:none;       // hide the div
   position: absolute; // use absolute positioning
   top:110%;           // place it about 10% of the containing container's height below it
   z-index:2;          // place it above other elements
}


.menuwrapper> div > label{
   display:block;      // again, customize this.
}

JavaScript

Now you need to add an event listener to all the wrappers.

var results = document.querySelectorAll(".menuwrapper"); // save all menues
var i; // index
for(i = 0; i < results.length; ++i){
    // for every menuwrapper, add an listener
    results[i].addEventListener('click',function(e){
        // make the contained menu visible
        this.querySelector(".menu").style.display = 'block';

        // stop the event from propagation
        e.stopPropagation();
    });
}

// Almost the same, but if anything outside of the
// menuwrapper is clicked then all menus should be closed.
window.addEventListener('click',function(){
    var i;
    var results = document.querySelectorAll(".menuwrapper .menu");
    for(i = 0; i < results.length;  ++i)
        results[i].style.display = 'none';        
});

JSFiddle Demo

See also:

Upvotes: 1

Paul
Paul

Reputation: 9012

See my simple demo. It's just written from scratch.

All you need is a button (visible) and the "popup" (hidden). Now, you add an event listener to check if button is clicked and fade in/out the "popup".

$(document).ready(function() {
  $('#columns').on('click', function() {
    $('#selector').fadeToggle(750);
  });
});​

Upvotes: 3

Nhu Trinh
Nhu Trinh

Reputation: 13956

You can use qTip here, http://craigsworks.com/projects/qtip/demos/ it's nice and easy to use. You can create a qtip with html code

Upvotes: 1

Related Questions