:Target for Modules / Lightboxes

_base.scss

// Vertical Mixin for those who don't have it

@mixin vertical-align {
	position: absolute; //relative
	top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
}
// Give it a class

.vertical { 
	@include vertical-align;
}

// You might need this on the parent

.vertical-parent{
	position: relative;
	height: 100%;
}

// Colours

$brand-colour: teal;
$brand-highlight: orange;
$white: white;
$black: black;

// Target Selector begins here

#secrets{
	display: none;
	z-index: 500;
	
	&:target{
		display: block;
		position: fixed;
		background: fade-out($brand-colour, 0.1);
		color: $white;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		@include font-size(1);
		border-radius: 10px;
		
		a {
			color: $lime;
			
			&.close {
			    @include button($brand-highlight);
			    @include font-size(1);
				display: inline-block;
			}
		}
	}
	
	// This is for content inside that is long. 
	.scroll {
	    background: $white;
	    border-radius: 10px;
	    color: $brand-colour;
	    max-height: 250px;
	    margin: 0 auto 2em;
	    overflow: scroll;
	    padding: 10px 20px;
	    width: 70%;
	}
}

index.php

		<!-- This is designed for extra content that needs to be in a lightbox. But without any lightbox nonsense-->
		<div id="secrets">
			<section class="wrap clearfix vertical-parent">
				<div class="vertical twelvecol first">
					<h2>Welcome to the secret life of the hidden link</h2>
					<p>
						This is a secret link. I can't believe it's actually here though, can you?
					</p>
					
					<div class="scroll">
						<p>They don't allow you to have bees in here. Are you aware of this? Coming soon. Indeed. Chaw-chee, chaw-chee chaw-chee! Coo coo ca cha! Ah coodle doodle do Caw ca caw, caw ca caw. Let's make Ann the backup, okay? Very good way to think about her, as a backup. Suddenly he's too much of a big-shot to brush mother's hair. These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing.</p>
						
						<p>My brother wasn't optimistic it could be done, but I didn't take &quot;wasn't optimistic it could be done&quot; for an answer. They want to break his legs. It's a good thing he's already got that little scooter.</p>
						
						<p>Stop licking my hand, you horse's ass. Stop licking my hand, you horse's ass. They don't allow you to have bees in here. I mean, it's one banana, Michael. What could it cost, ten dollars? I was set up. By the Brits. A group of British builders operating outside the O.C. Are you at all concerned about an uprising? They want to break his legs. It's a good thing he's already got that little scooter. Heyyyyyy, Uncle Father Oscar.</p>
						
						<p>Bob Loblaw Lobs Law Bomb. Why are you squeezing me with your body? It's a hug, Michael. I'm hugging you. Oh, I'm sorry, I forgot&hellip; your wife is dead! He's going to be all right.</p>
					</div>

					<a class="close" href="#i-know-what-you-saw">Close</a>

				</div>
			</section>
		</div>