Drop-down Input Field

I would like to add a similar drop-down input field (picture below), to my website. I want it to appear when a link/image/button is clicked on. Can this be done with JavaScript? Al

Solution 1:

Can this be done with JavaScript?

Yes. The JavaScript/CSS equivalent would be a button which (when clicked) displayed an element with position: fixed or position: absolute.

Here is a simple example using jQuery: http://jsfiddle.net/Byujd/1/

Solution 2:

This is a bit complex.

HTML & Default Styles

You need an element which is displayed above the content:

<divclass="modal"><!-- Some content like textarea and stuff --></div>

Now you can style this box with the position-property and other things:

.modal {
  position: absolute;
  z-index: 999;
}

This now displays above the rest of the content.

Some jQuery-Goodness

The button just needs a listener. With jQuery this looks something like this:

$('.the-buttons-class').click( function (e) {
  e.preventDefault();
  $('.modal').toggle();
});

A better way

Instead of toggling the state of the modal with jQuery's toggle()-function you could toggle a class on it and manipulate the state accordingly:

CSS:

.modal {
  ...
  display: none;
}

.modal.shown {
  display: block;
}

JS:

$('.the-buttons-class').click( function (e) {
  e.preventDefault();
  $('.modal').toggleClass('shown');
});

Moar

I've done something pretty similar at my page. Make sure to check the search box. The code for it is on GitHub.