<div id="overlay"></div>
<div class="fab">
  <i class="material-icons fab-icon">add</i>

  <form class='cntt-wrapper'>
    <div id="fab-hdr">
      <h3>Popup</h3>
    </div>

    <div class="cntt">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="text1" />
        <label class="mdl-textfield__label" for="text2">Text...</label>
      </div>

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="text2" />
        <label class="mdl-textfield__label" for="text2">More text...</label>
      </div>
    </div>

    <div class="btn-wrapper">
      <button class="mdl-button mdl-js-button" id="cancel">Cancel</button>
      <button class="mdl-button mdl-js-button mdl-button--primary" id="submit">Submit</button>
    </div>

  </form>
</div>


<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--5-col mdl-cell--12-col-tablet mdl-shadow--2dp center m-t-100">
    <div class="box">
      <h1>Material Popup</h1>
      <h4>Just click the fancy button to see the magic</h4>
      <br>
      <p>This example uses the MDL-Libary for the CSS layout,<br/> the popup itself works it just fine without.</p>
    </div>
  </div>

/* mdl - popup */
.dark-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 5;
  -webkit-transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
  transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
}

.fab {
  z-index: 5;
  cursor: pointer;
  border-radius: 50%;
  position: fixed;
  right: 400px;
  top: 100px;
  color: #fff;
  background: #d35400;
  height: 56px;
  width: 56px;
  box-shadow: 0 5px 5px rgba(126, 111, 111, 0.39);
  -webkit-transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
  transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
}

.fab.active {
  cursor: default;
  background: #FFF;
  border-radius: .125em;
  width: 450px;
  height: 350px;
  box-shadow: 0 25px 35px 0 rgba(0, 0, 0, 0.35);
  top: 10%;
  right: calc(50% - 250px);
}

.fab-icon {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-12px, -12px);
  -ms-transform: translate(-12px, -12px);
  transform: translate(-12px, -12px);
  line-height: 24px;
  width: 24px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.active .fab-icon {
  display: none;
}

.active .protect {
  background: none;
}

.cntt-wrapper {
  display: none;
}

.active .cntt-wrapper {
  display: block;
}

#fab-hdr {
  position: absolute;
  width: 100%;
  background: #d35400;
}

#fab-hdr h3 {
  padding-left: 30px;
}

.cntt {
  padding: 100px 35px 0 35px;
  color: #757575;
}

.btn-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 8px;
  padding: 6px 16px;
}

/* just presenation */
.center{margin: 0 auto}
.m-t-100{margin-top:100px}
.box {
  height: 300px;
  padding: 100px;
}

//Variables
var overlay = $("#overlay"),
        fab = $(".fab"),
     cancel = $("#cancel"),
     submit = $("#submit");

//fab click
fab.on('click', openFAB);
overlay.on('click', closeFAB);
cancel.on('click', closeFAB);

function openFAB(event) {
  if (event) event.preventDefault();
  fab.addClass('active');
  overlay.addClass('dark-overlay');

}

function closeFAB(event) {
  if (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }

  fab.removeClass('active');
  overlay.removeClass('dark-overlay');
  
}