jQuery Modal example julien gbe

by Julien Etienne

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class='content' contentEditable="true">
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,
  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,...

CSS

hrml,
body {
  overflow-x: hidden;
}

.content {
  background: pink;
  height: 100vh;
  width: 100%;
  padding: 2em;
  overflow-x: hidden;
}

.window-dimmer {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal-center {
  width: 100%;
}

.modal {
  background: white;
  width: 400px;
  height: auto;
  margin: 0 auto;
}

.modal section {
  padding: 2em;
}

JavaScript

// Get window height
function setModal() {
  var windowHeight = $('.window-dimmer').height(), //  This should be window
    modalHeight = $('.modal').height(),
    topMargin = (windowHeight - modalHeight) / 2;

  // If modal is greater than window
  if (modalHeight > windowHeight) {
    $('.window-dimmer').css({
      position: 'absolute'
    })
  } else {
    // Set Modal to center 
    $('.modal').css({
        marginTop: topMargin
      })
      // Position fixed dimmer
    $('.window-dimmer').css({
      position: 'fixed'
    })
  }
}
setModal();


$('.modal').bind("blur focus focusin focusout resize click" +
  "mousedown mouseup mousemove mouseover mouseout mouseenter " +
  "mouseleave change select submit keydown keypress keyup",
  function(e) {
    setModal();
  });


$(window).resize(function() {
  setModal();
});