|
|
Copied To Clipboard!
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS Lightbox</title>
<style>
/* Begin Pure CSS Lightbox */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
div.lightbox {display:none;position:fixed;left:0px;top:0px;width:100%;height:100%;}
div.lightbox:target {display:table;}
div.lightbox figure {display:table-cell;margin:0px;padding:0px;width:100%;height:100%;vertical-align:middle;}
div.lightbox figure figcaption {display:block;margin:auto;padding:8px;background-color:#ddbbff;height:250px;position:relative;overflow:auto;border:1px #000000 solid;border-radius:10px;text-align:justify;font-size:14px;}
div.lightbox figure .closemsg {display:block;margin:auto;height:0px;overflow:visible;text-align:right;z-index:5001;cursor:default;}
div.lightbox figure .closemsg, div.lightbox figure figcaption {width:300px;}
.closemsg::after {content:"\00D7";display:inline-block;position:relative;right:-20px;top:-10px;z-index:5002;color:#ffffff;border:1px #ffffff solid;border-radius:10px;width:20px;height:20px;line-height:18px;text-align:center;margin:0px;background-color:#000000;font-weight:bold;cursor:pointer;}
.closemsg::before {content:"";display:block;position:fixed;left:0px;top:0px;width:100%;height:100%;background-color:#000000;opacity:0.85;}
</style>
</head>
<body>
<div id="content">
<h3>Pure CSS Lightbox</h3>
<p>Some sample text</p>
<p>[ <a href="#example1">Open example #1</a> (left side curved borders) | <a href="#example2">Open example #2</a> (curved borders) ]</p>
<div class="lightbox" id="example1">
<figure>
<a href="#" class="closemsg"></a>
<figcaption>This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose.<br />
This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose.</figcaption>
</figure>
</div>
<div class="lightbox" id="example2">
<figure>
<a href="#" class="closemsg"></a>
<figcaption>This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose.</figcaption>
</figure>
</div>
<br /><br /><br /><br /><br />
<p>
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_187.html">Pure CSS Lightbox Code Snippet</a> page. ]
</p>
</div>
</body>
</html>
|
