Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Daily UI #016 | Pop-Up / Overlay
<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>
$(".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);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.