SyntaxFix

[css] HTML / CSS Popup div on text click

DEMO

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

_x000D_
_x000D_ 
.black_overlay {_x000D_
  display: none;_x000D_
  position: absolute;_x000D_
  top: 0%;_x000D_
  left: 0%;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  background-color: black;_x000D_
  z-index: 1001;_x000D_
  -moz-opacity: 0.8;_x000D_
  opacity: .80;_x000D_
  filter: alpha(opacity=80);_x000D_
}_x000D_
.white_content {_x000D_
  display: none;_x000D_
  position: absolute;_x000D_
  top: 25%;_x000D_
  left: 25%;_x000D_
  width: 50%;_x000D_
  height: 50%;_x000D_
  padding: 16px;_x000D_
  border: 16px solid orange;_x000D_
  background-color: white;_x000D_
  z-index: 1002;_x000D_
  overflow: auto;_x000D_
}
_x000D_ 
<html>_x000D_
_x000D_
<head>_x000D_
  <title>LIGHTBOX EXAMPLE</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <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>_x000D_
  </p>_x000D_
  <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>_x000D_
  </div>_x000D_
  <div id="fade" class="black_overlay"></div>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
_x000D_
_x000D_

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to html

• Embed ruby within URL : Middleman Blog • Please help me convert this script to a simple image slider • Generating a list of pages (not posts) without the index file • Why there is this "clear" class before footer? • Is it possible to change the content HTML5 alert messages? • Getting all files in directory with ajax • DevTools failed to load SourceMap: Could not load content for chrome-extension • How to set width of mat-table column in angular? • How to open a link in new tab using angular? • ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment • Simple Popup by using Angular JS • how to make window.open pop up Modal? • How to handle authentication popup with Selenium WebDriver using Java • Show popup after page load • How to make popup look at the centre of the screen? • How to handle Pop-up in Selenium WebDriver using Java • HTML / CSS Popup div on text click • How to make a Div appear on top of everything else on the screen? • Popup window in winform c# • Display UIViewController as Popup in iPhone