.modal { position: fixed; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .modal.is-visible { visibility: visible; } /* Prevent scrolling on when `.modal` is visible */ .no-scroll { overflow: hidden; } /* Modal Overlay & Container */ .modal-overlay, .modal-container { position: fixed; z-index: 9000; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: visibility 0s ease 0.3s, opacity 0.3s ease; } .modal-overlay { background: hsla(0, 0%, 0%, 0.5); } .modal.is-visible .modal-overlay, .modal.is-visible .modal-container { opacity: 1; visibility: visible; transition-delay: 0s; } /* 1. Allow scrolling on `.modal-container` in case `.modal-wrapper` is taller than the viewport */ .modal.is-visible .modal-container { overflow: auto; /* 1 */ -webkit-overflow-scrolling: touch; /* 1 */ } /* Modal Wrapper */ .modal-wrapper { position: absolute; z-index: 10000; top: 3em; left: 50%; width: 100%; max-width: 650px; margin-left: -50%; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } /* Modal Transition */ .modal-transition { transition: visibility 0.3s 0.12s, opacity 0.3s 0.12s, transform 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .modal.is-visible .modal-transition { transform: translateY(0); opacity: 1; } .modal-header, .modal-content { padding: 1em; } /* Modal Header */ .modal-header { position: relative; background-color: #fff; padding-bottom: 0px; margin-bottom: 0px; } /* Modal Heading */ .modal-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Modal Close Button */ .modal-close { position: absolute; top: 0; right: 0; background: none; border: 0; font-size: xx-large; color: white; } .modal-close:hover { color: #777; } /* Modal Content */ .modal-content > *:first-child { margin-top: 0; } .modal-content > *:last-child { margin-bottom: 0; } @media (min-width: 600px) { /* Modal Wrapper */ .modal-wrapper { top: 6em; margin-left: -300px; } } .modal-heading-banner { background-color: #00ABB3; margin-left: auto; margin-right: auto; font-size: 1.5rem; color: white; padding: 5px 0px 5px 15px; } .modal-body { padding: 20px; } .modal-footer { padding-left: 20px; padding-right: 20px; } .vh { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; }