// Prevent overflow on HTML element html { overflow-y: scroll; -webkit-overflow-scrolling: touch; // Native scroll momentum } // To prevent jumping should not have any margin on top or bottom .has-overlay { overflow: hidden; height: auto; > body { height: 100%; overflow: hidden; } } %modal { // Hide initially -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transform: translate3d(0, 100%, 0); // iOS transform: translate3d(0, 100%, 0); // Maintain a fixed position position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: $modal-layer; width: 0; height: 0; overflow: hidden; opacity: 0; // Show modal when requested &:target, &.is-active { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); width: auto; height: auto; opacity: 1; } // Internet Explorer 8 display: none\9; &.is-active { display: block\9; height: 100%\9; width: 100%\9; } // Overwrite IE8 hack for IE9 and IE10 &:target, &.is-active { display: block\9; } // Content Area .modal-inner { position: absolute; top: 60px; left: 50%; z-index: 20; margin-left: ($modal-max-width / 2) * -1; width: $modal-max-width; overflow-x: hidden; -webkit-overflow-scrolling: touch; // Native style momentum scrolling > img, > video, > iframe { width: 100%; height: auto; min-height: 300px; } > img { width: auto; max-width: 100%; } iframe { display: block; width: 100%; border: 0; } } // Content .modal-content { position: relative; max-height: 400px; max-height: 60vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; > * { max-width: 100%; } } // Footer footer { border-top: 1px solid lighten($modal-border-color, 20); padding: 0 1.2em 18px; background: #f0f0f0; border-radius: 2px; } // A close button .modal-close { display: block; height: 1px; // Prevent close element to appear clip: rect(0 0 0 0); margin: -1px; overflow: hidden; &:focus:after { outline: 1px dotted; outline: -webkit-focus-ring-color auto 5px; } // Background as close &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } // Actual close button on modal &:after { content: '\00d7'; position: absolute; top: 35px; right: 50%; z-index: 20; margin-right: -($modal-max-width / 2); } } // When screen isn't as wide as the modal anymore @media screen and (max-width: $modal-max-width + 40) { .modal-inner { width: auto; left: 20px; right: 20px; margin-left: 0; } .modal-close { &:after { margin-right: 0 !important; right: 20px; } } } // For small screens adjust the modal @media screen and (max-width: $modal-small-breakpoint) { -webkit-transform: translate(0, 400px); // Use px to work around Android 2.3 bug -webkit-transform: translate3d(0, 100%, 0); // And overwrite px if 3D transforms are supported transform: translate3d(0, 100%, 0); -webkit-transition: opacity 1ms .25s; -moz-transition: opacity 1ms .25s; -o-transition: opacity 1ms .25s; -ms-transition: opacity 1ms .25s; transition: opacity 1ms .25s; display: block; right: auto; bottom: auto; &:target, &.is-active { width: 100%; height: 100%; // For IE we need to hide the close element to prevent overlay of other elements .modal-close { display: block; } } .modal-inner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; right: 0; height: 100%; overflow: auto; } .modal-content { max-height: none; // Prevent text from breaking modal in mobile view -ms-word-break: break-all; word-break: break-all; word-break: break-word; // Non-standard for WebKit -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .modal-close { display: none; right: auto; &:before { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 20; } &:after { top: 5px !important; right: 5px; left: auto; margin-left: 0; } } } // For small heights @media screen and (max-height: 46em) and (min-width: $modal-small-breakpoint) { .modal-content { max-height: 340px; max-height: 50vh; } } @media screen and (max-height: 36em) and (min-width: $modal-small-breakpoint) { .modal-content { max-height: 265px; max-height: 40vh; } } // Stackable Modals &.is-stacked { -webkit-transform: translate(0, 0) scale(1, 1); -moz-transform: translate(0, 0) scale(1, 1); -o-transform: translate(0, 0) scale(1, 1); -ms-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); opacity: 1; .modal-inner { -webkit-animation: scaleDown .7s ease both; -moz-animation: scaleDown .7s ease both; animation: scaleDown .7s ease both; } // Hide overlay and close button .modal-close { opacity: 0; } // On small screens @media screen and (max-width: $modal-small-breakpoint) { -webkit-animation: scaleDown .7s ease both; -moz-animation: scaleDown .7s ease both; animation: scaleDown .7s ease both; .modal-inner { -webkit-animation: none; -moz-animation: none; animation: none; } .modal-close { opacity: 1; } } } }