VelocityJS Modal

index.pug

.screen
  .body
    button#open Modal

  .layer
    .content
      span This is the content area

    .overlay
      button#close X

.wrapper
  img(src='http://walmart-mx.demo.justpremium.com/images/content.jpg')

script.coffeescript

$layer = $('.layer')
$screen = $('.screen')

ease = (easing, duration = 'fast') ->
  return {easing, duration}

easeIn = ease('easeInSine')
easeOut = ease('easeOutSine')

go = (action, display) ->
  return Object.assign(action, {display})

open = (e) ->
  $layer.velocity { translateY: ['0%','-200%'] }, go(easeOut, 'block')
  $screen.velocity { backgroundColorAlpha: 0.9 }, -> easeOut
  e.stopPropagation() if e?
  return

quit = (e) ->
  $layer.velocity { translateY: '200%' }, go(easeIn, 'none')  
  $screen.velocity { backgroundColorAlpha: 0 }, -> easeIn
  e.stopPropagation()
  return

$layer.click (e) ->
  screenad.click()
  e.stopPropagation()
  return

$('#close').click quit
$('#open').click open
$screen.click quit
open()

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>

style.stylus

@import 'nib'

$color1 = rebeccapurple
$color2 = white
$color3 = #333
$size = 500px 450px

body
  background-color #f5f5f5

button
  background-color $color1
  border none
  color $color2
  padding 20px
  text-transform uppercase

.layer
  background-color $color3
  cursor pointer
  display none
  overflow hidden
  position fixed
  size $size
  user-select none

  .content
    align-items center
    background-color $color1
    color $color2
    display flex
    justify-content center
    position fixed
    size 100%

  .overlay
    display flex
    justify-content flex-end
    position fixed
    size 100% auto
    
.screen
  align-items center
  background-color alpha($color3, 0)
  display flex
  font-family 'Open Sans'
  font-weight 800
  position fixed
  justify-content center
  size 100%

.wrapper
  margin auto
  size 1000px 100%
  padding 40px 4px 4px auto
  
  img
    border 2px solid #D2D1D6
    border-radius 4px

velocityjs-modal.markdown

VelocityJS Modal

A Pen by Bernardo Kuri on CodePen.

License.