JSFiddle - React, Tailwind, and code Playground

by chantastic

HTML

<span class="launchModal">Launch Modal</span>

<p>Semiotics eiusmod VHS Pinterest. Ex tattooed pop-up minim, hashtag +1 ea asymmetrical sustainable vegan PBR&B vero sartorial velit voluptate. Viral id ea, YOLO fixie distillery Odd Future biodiesel flexitarian. Minim quinoa nulla, dolore trust fund Cosby sweater ad Portland. In mumblecore nesciunt reprehenderit sartorial. Asymmetrical Tonx +1 Etsy, Austin tote bag aliqua messenger bag ea. Wayfarers ullamco irure PBR&B Austin freegan.</p>

<span class="launchModal">Launch Modal</span>

<p>Readymade Williamsburg labore fingerstache, whatever salvia dolor. Accusamus magna vinyl letterpress sed cray. 3 wolf moon Vice Pinterest, before they sold out in cardigan distillery selvage ennui. Synth delectus craft beer, pug skateboard keytar assumenda tofu disrupt art party fingerstache 3 wolf moon consectetur stumptown culpa. Locavore incididunt tempor, Etsy raw denim fingerstache you probably haven't heard of them pop-up eu post-ironic. Hoodie VHS slow-carb locavore kale chips. XOXO aute fixie magna elit Tonx, fashion axe Pitchfork culpa McSweeney's minim non selfies narwhal.</p>

<span class="launchModal">Launch Modal</span>

<p>Pinterest beard farm-to-table, roof party Austin fap labore next level consectetur Portland consequat nihil Bushwick. Asymmetrical skateboard stumptown esse, chambray squid laborum deep v pour-over do hella paleo excepteur. Biodiesel nesciunt raw denim scenester incididunt Pinterest ad, meggings XOXO asymmetrical aute eiusmod Truffaut. Cray mustache consectetur viral typewriter meggings. Wes Anderson deserunt skateboard aliqua, farm-to-table Tumblr iPhone pariatur before they sold out wayfarers photo booth. Art party try-hard qui, letterpress sartorial bitters Wes Anderson brunch. Skateboard XOXO blog, art party excepteur elit selvage eiusmod swag.</p>

<span class="launchModal">Launch Modal</span>

<p>Bicycle rights iPhone sunt, blog minim sartorial fashion axe authentic esse chia fanny pack...

SCSS

/* the goods */
.body--modal-open {
  overflow: hidden;
}

.modal-wrap {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  overflow-y: scroll;

  background-color: rgba(0,0,0,0.3);
}

.modal {
  padding: 20px;
  position: relative;
  width: 300px;
  margin: 20px auto;
  background-color: #fff;
}

.modal__open {
  display: block;
}

/* stuff you shouldn't worry about */

.launchModal,
.dismissModal {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  background-color: green;
  color: white;
}

.dismissModal {
  background-color: red;
  float: right;
}

CoffeeScript

$ ->
  showModal = =>
    $this = $(this)
    $this
      .find('.modal-wrap')
      .addClass('modal__open')
    $this
      .offsetParent('body')
      .addClass('body--modal-open')

  hideModal = =>
    $('.modal-wrap').removeClass('modal__open')
    $(this)
      .offsetParent('body')
      .removeClass('body--modal-open')
    
  $('.launchModal').on 'click', showModal

  $('.dismissModal').on 'click', hideModal