Skip to content

Instantly share code, notes, and snippets.

@tysonmote
Last active September 7, 2016 16:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tysonmote/5632433 to your computer and use it in GitHub Desktop.
Save tysonmote/5632433 to your computer and use it in GitHub Desktop.
Stop overcomplicating things, JavaScript nerds. You need, like, 20 lines of JS, max, to do a modal window. Stop writing 500-line JS library monstrosities with painfully slow animations that break if you so much as breathe on them. Jesus.
<a href="#" data-modal="#myModal">Open</a>
<div class="modal hide" id="myModal">
<button class="close-modal">X</button>
(stuff)
</div>
.modal-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50000;
background-color: rgba( 0, 0, 0, 0.4 );
}
.modal {
position: fixed;
top: 15%;
left: 50%;
z-index: 60000;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
&.hide {
position: absolute;
left: -1000px;
}
}
$( document ).on( "click", "[data-modal]", (e) ->
body = $( document.body )
button = $( this )
modal = $( button.data( "modal" ) )
closeButton = modal.find( ".close-modal" )
bg = $( "<div class='modal-bg' />" )
body.append( bg )
modal.removeClass( "hide" )
close = ->
modal.addClass( "hide" )
bg.remove()
body.off( "keydown.modal" )
closeButton.off( "click.modal" )
bg.on( "click", close )
closeButton.on( "click.modal", close )
body.on( "keydown.modal", (e) -> close() if e.keyCode == 27 )
return false
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment