How do we pop up a new "section" onto a page like gmail? (SOLVED)

[mw84]

With gmail when one clicks on the [Compose] function button it opens up a new small window on the right side, which can also expand. How do we do this with CSS?

Thanks.

P.S. I feel this question belongs to both Design and CSS.

[Beverleyh]

Interactive functionality (e.g. click a button to trigger an action) normally comes under the umbrella of JavaScript; maybe via the addition/removal of a class that in turn triggers something to happen in either CSS or JavaScript, so maybe start your research there.

For a CSS-only method, have a look in to the checkbox hack https://css-tricks.com/the-checkbox-hack/. It isn’t as versatile as JavaScript would be, and depends heavily on element placement in the DOM, but it might be an option for you.

[mw84]

No. You missed my question entirely! Don’t mean to be rude, you don’t seem to be an expert in CSS, so, try not to respond to advanced questions like this one, it only irritates people.

[mw84]

The key is as follows (particularly, position: fixed) :

.add-window {
  min-width: 350px;
  position: fixed;
  bottom: 0px;
  right: 10px;
  border: 1px solid black;
  background-color: white;
}

[Beverleyh]

No. You missed my question entirely! Don’t mean to be rude, you don’t seem to be an expert in CSS, so, try not to respond to advanced questions like this one, it only irritates people.

No problem @mw84. I will try not to respond to any more of your advanced questions and I will go back to working on my web development blog, my CSS, JavaScript and PHP freebies, and my full time job as a government employed website technician that I’ve been in for almost 10 years.

[Author]

Posts