.container  
  .filter(hidden)
  .modal(hidden)
    h1 This is a modal
    p Some more modal text goes here
    .modal-close
      button Close      
  .open-modal Open Modal

h1
  margin: 0

//---------------------------------------------------------
// image container
//---------------------------------------------------------

.container
  background:
    image: url(https://source.unsplash.com/JgOeRuGD_Y4)
    size: cover
    position: center
  height: 100vh
  position: relative
  
//---------------------------------------------------------
// filter layer
// This is a layer over the image just for filtering
//---------------------------------------------------------

.filter
  // play around with different filters (uncomment to see the filter)
  // you can chain filters to make a complex effect
  backdrop-filter: saturate(50%) blur(20px)
  backdrop-filter: hue-rotate(90deg) saturate(30%)
  backdrop-filter: saturate(30%)
  backdrop-filter: brightness(30%)
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100vh  
  z-index: 2
  
//---------------------------------------------------------
// modal box
//---------------------------------------------------------

.modal
  max-width: 350px
  background:
    color: #fff
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  padding: 2rem
  border-radius: 10px
  z-index: 3
  
.modal-close
  margin: 2rem 0 0
  text-align: center
  
//---------------------------------------------------------
// modal trigger
//---------------------------------------------------------

.open-modal
  position: fixed
  top: 3rem
  left: 50%
  transform: translateX(-50%)
  color: #fff
  padding: 2rem 4rem
  border-radius: 50px
  transition: background-color 200ms ease
  z-index: 1
  
  &:hover
    background:
      color: rgba(#fff, 0.2)
    cursor: pointer
    
    

//---------------------------------------------------------
// open modal
//---------------------------------------------------------

$('.open-modal').on('click', function() {
  // fade in filter layer and modal
  $('.filter, .modal').fadeIn(200);
});

//---------------------------------------------------------
// close modal
//---------------------------------------------------------

// close modal by clicking the "close" button or background (outside modal)
$('.modal-close, .filter').on('click', function() {
  // fade out filter layer and modal
  $('.filter, .modal').fadeOut(200);
});