HTML / CSS Popup div on text click

css html popup
user2104319 picture user2104319 · Sep 28, 2013 · Viewed 355.6k times · Source

I want to make popup div instead of popup window for my 'About' picture/page with current button like in this example: OMG! Ubuntu! Facebook like popup

Answer

coder picture coder · Sep 28, 2013

DEMO

In the content area you can provide whatever you want to display in it.

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
<html>

<head>
  <title>LIGHTBOX EXAMPLE</title>
</head>

<body>
  <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
  </p>
  <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
  </div>
  <div id="fade" class="black_overlay"></div>
</body>

</html>

Related questions

How to make a Div appear on top of everything else on the screen?

I have the following popup: But when i move this popup up to appear over the map, it gets hidden: How to force something to be the top most, always displayed object on screen? I have tried setting the z-index …

Read More
override css for html5 form validation/required popup

How can I override the default popup for a required field on a HTML5 form? Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup) The HTML <form> <input type="text" …

Read More
Creating a css and jquery fade/blur background when popup is visible

I have looked at other questions and had no luck trying to integrate other answers to my own code. At the moment, when the mouse hovers a slide down appears and when you click on the image the popup appears. …

Read More