Modal Dialog

Best way (IMO) to create a modal dialog. Works no mater the size of the page or dialog.

by 0x0049

HTML

<div id="modal" class="modal">
  <div class="modal-inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac ornare metus. Duis luctus consequat consectetur. Integer eleifend metus et condimentum rutrum. Nam vel laoreet diam, in gravida metus. Etiam sagittis diam nec lacus sodales, id hendrerit quam convallis. Proin finibus pretium commodo. Nam et luctus metus. Nulla vitae augue est. Donec vitae tristique urna, id cursus nunc.</p>

    <p>Curabitur non ex suscipit, bibendum turpis sed, pretium turpis. Aliquam ullamcorper vulputate sem at tincidunt. Integer libero purus, egestas sed commodo ut, hendrerit vel felis. Quisque venenatis, felis eu dictum sagittis, erat odio porttitor dolor, et elementum nisl enim at tortor. Cras mollis dignissim tellus, in blandit erat. Etiam id cursus erat. Sed blandit lobortis lorem eget venenatis. Vestibulum efficitur cursus vulputate. Sed iaculis enim a dolor aliquet, ac semper ligula porta.</p>

    <p>Aenean aliquam dictum justo a tincidunt. Vivamus interdum nisl vitae nibh bibendum vulputate. Nulla lacus velit, semper sed lacus quis, lobortis feugiat leo. Etiam pharetra velit sit amet nulla varius, sit amet dignissim augue viverra. Quisque eu consectetur eros, quis porttitor tellus. Quisque vitae nulla quis turpis egestas mattis at eu justo. Morbi sed ligula non dui bibendum congue. Mauris ut tellus sed est porttitor faucibus eu a lorem. Vivamus quis rutrum turpis, ut viverra odio. Phasellus elementum pellentesque dictum. Nam ultrices orci nec erat tempus volutpat.</p>

    <p>Sed sed lacus tortor. Sed mollis, urna ullamcorper molestie bibendum, orci sapien semper ante, non feugiat nulla metus vel lacus. Fusce dapibus commodo felis id euismod. Donec porta risus ac mollis tristique. Suspendisse condimentum mauris augue, vel posuere ex sollicitudin quis. Fusce faucibus arcu id dictum pellentesque. Fusce ornare nisi ut est feugiat congue. Nam porta, magna ultricies posuere maximus, nisl nisl feugiat massa,...

CSS

*, *:before, *:after {
  box-sizing: border-box;
}

.modal {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: none;
  padding: 0 20px;
  z-index: 2;
}
  
.modal-inner {
  background-color: #fff;
  border-radius: 3px;
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
}

/* So the scrollbar calculation is correct. */
body {
  margin: 0;
}

/* The rest is for the demo only. */
#open {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: blue;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1;
}

#open:hover {
  background-color: green;
}

body {
  padding: 10px;
}

#site-content {
  background-color: #fff;
  border: 1px solid #eee;
  padding: 10px;
}

JavaScript

function openModal(modal) {
  // Note: fixed elements will also need the margin 
  // adjustment (like a fixed header, if you have one).
  var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
  document.body.style.margin = '0px ' + scrollBarWidth + 'px 0px 0px';
  document.body.style.overflow = 'hidden';
  modal.style.display = 'block';
};

function closeModal(modal) {
	document.body.style.margin = '';
  document.body.style.overflow = '';
  modal.style.display = 'none';
};

// I prefer to generate and dynamically insert the modal
// but for this demonstration it is already in the markup.
var modal = document.getElementById('modal');

// Clicking outside the inner modal content should close it.
modal.addEventListener('click', function () {
  closeModal(modal);
});
for (var i = 0; i <  modal.childNodes.length; i++) {
	modal.childNodes[i].addEventListener('click', function (event) {
		event.stopPropagation();
	});
}

// Open the modal when open button is pressed.
document.getElementById('open').addEventListener('click', function (event) {
  event.preventDefault();
  openModal(modal);
});