Skip to content

Instantly share code, notes, and snippets.

@lineharo
Last active July 28, 2019 16:36
Show Gist options
  • Save lineharo/538559b87cc81f64719a3756b078a9c7 to your computer and use it in GitHub Desktop.
Save lineharo/538559b87cc81f64719a3756b078a9c7 to your computer and use it in GitHub Desktop.
Popup window with HTML+CSS+JS (pug, stylus, jquery)
$('button[data-popup]').click(function(){
$('.popup[data-popup="' + $(this).data('popup') + '"]').fadeIn('fast');
});
$('.popup .close').click(function() {
$(this).parent().parent().fadeOut('fast');
});
$( '.popup' ).mousedown(function(e) {
if (!$(e.target).closest('.window').length ) {
$(this).fadeOut('fast');
}
});
button(data-popup="form-order")
<!-- ... -->
.popup(data-popup="form-order")
.window
.close
// form content
.popup
display: none
width: 100%
height: 100%
position: fixed
left: 0
top: 0
overflow: auto
z-index: 1000
text-align: center
background-color: rgba(0,0,0,0.8)
.window
background-color: #FFFFFF
vertical-align: middle
padding: 1em
max-width: 750px
width: 100%
position: relative
margin: 50px auto 0
.close
height 24px
width 51px
position absolute
cursor: pointer
right 0px
top 0px
z-index 1001
background url( %%FILEPATH%% ) no-repeat top center;
&:hover
background-position: bottom center;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment