Daily UI #016 | Pop-Up / Overlay

daily-ui-016-pop-up-overlay.markdown

Daily UI #016 | Pop-Up / Overlay

A Pen by Samuel Janes on CodePen.

License.

index.html

<a href="#" class='btn open-modal' data-modal="#modal1">Open Modal</a>

<div class='modal' id='modal1'>
	<div class='content'>
		<h1 class='title'>This is a modal</h1>
		<p>
				Here is some text and stuff. cool cool	
		</p>
		<a class='btn close-modal' data-modal="#modal1" href="#">K Bye</a>
	</div>	
</div>	

script.js

$(".modal").each( function(){
	$(this).wrap('<div class="overlay"></div>')
});

$(".open-modal").on('click', function(e){
	e.preventDefault();
	e.stopImmediatePropagation;
	
	var $this = $(this),
			modal = $($this).data("modal");
	
	$(modal).parents(".overlay").addClass("open");
	setTimeout( function(){
		$(modal).addClass("open");
	}, 350);
	
	$(document).on('click', function(e){
		var target = $(e.target);
		
		if ($(target).hasClass("overlay")){
			$(target).find(".modal").each( function(){
				$(this).removeClass("open");
			});
			setTimeout( function(){
				$(target).removeClass("open");
			}, 350);
		}
		
	});
	
});

$(".close-modal").on('click', function(e){
	e.preventDefault();
	e.stopImmediatePropagation;
	
	var $this = $(this),
			modal = $($this).data("modal");
	
	$(modal).removeClass("open");
	setTimeout( function(){	
		$(modal).parents(".overlay").removeClass("open");
	}, 350);
	
});	

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

$red: #EF233C
$blue: #2B2D42
$orange: #FF9F1C

*
	box-sizing: border-box

body
	font-family: 'Nunito', sans-serif
	min-height: 100vh
	display: flex
	justify-content: center
	align-items: center

.btn
	padding: 20px 50px
	display: inline-block
	background: $red
	color: white
	text-decoration: none
	transition: 0.35s ease-in-out
	font-weight: 700
	&:hover
		background: darken($red, 7.5%)

.overlay
	width: 100%
	min-height: 100vh
	display: flex
	justify-content: center
	align-items: center
	flex-direction: column
	padding: 40px
	position: fixed
	top: 0
	left: 0
	background: rgba(black, 0.75)
	opacity: 0
	pointer-events: none
	transition: 0.35s ease-in-out
	max-height: 100vh
	overflow-y: auto
	&.open
		opacity: 1
		pointer-events: inherit
	.modal
		background: white
		text-align: center
		padding: 40px 80px
		box-shadow: 0px 1px 10px rgba(white, 0.35)
		opacity: 0
		pointer-events: none
		transition: 0.35s ease-in-out
		max-height: 100vh
		overflow-y: auto
		&.open
			opacity: 1
			pointer-events: inherit
			.content
				transform: translate(0, -0px)
				opacity: 1
		.content
			transform: translate(0, -10px)
			opacity: 0
			transition: .35s ease-in-out
		.title
			margin-top: 0