Drop-down input field

Question

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? Also, I don't want it to affect the flow of the page.

Answer 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/

Answer 2

This is a bit complex.

HTML & Default Styles

You need an element which is displayed above the content:

<div class="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 .