Lexicon v1.0.32

Modals

Small Modal

300px wide modal window.

Default Modal

600px wide modal window.

Large Modal

900px wide modal in window sizes greater than 992px. 600px wide modal in window sizes between 768px and 992px.

Full Screen Modal

A modal that stretches to fit the browser window with 45px padding on every side.

The add button must be duplicated in the header and hidden in screen sizes greater than or equal to 768px if we want to preserve the tab order in mobile.

Modal Body No Footer

modal-body-no-footer is a modal-body helper class that removes the reserved space for modal-footer. Add it to modal-body when no modal-footer is present.

Modal Body No Header

modal-body-no-header is a modal-body helper class that removes the reserved space for modal-header. Add it to modal-body when no modal-header is present.

Modal Body Iframe

modal-body-iframe is a modal-body helper class that sizes and styles an iframe nested inside modal-body. Add it to modal-body when you want the iframe to be the same width and height as modal-body.

In mobile safari (iOS 8.3), any content inside an iframe that triggers a browser reflow will cause the iframe to scroll to the top.

Inline Scroller

inline-scroller is a helper class that sizes modal-body to a fixed height and scrolls any overflowing content. Add it to modal-body when you want modal-body to be a fixed height. It defaults to height 125px.

If using modal-fullscreen the class inline-scroller shouldn't be added to modal-body.

modal-inverse is a helper class that styles a modal with inverted colors, add it to modal-dialog.

iOS Safari doesn't respect overflow: hidden on the body element. See https://bugs.webkit.org/show_bug.cgi?id=153852.

In iOS Safari, body content under the modal will scroll when the beginning or end of scrollable content inside a modal is reached. Use the position fixed workaround by adding position: fixed; to the modal-open class. The body content will be scrolled to the top as a side effect.

@media (max-width: 767px) {
    .modal-open {
        position: fixed;
    }
}

The jQuery work around:

(function($) {
	var winScrollPos;
	var $doc = $(document);
	var $body = $('body');
	var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

	$doc.on('hidden.bs.modal', function(e) {
		if (iOS && !(winScrollPos === 0)) {
				window.scrollTo(0, winScrollPos);

				$body.css({
					position: '',
					top: ''
				});
			}
	});

	$doc.on('show.bs.modal', function(e) {
		if (iOS) {
			winScrollPos = window.scrollY;

			if (!(winScrollPos === 0)) {
				$body.css({
					position: 'fixed',
					top: -winScrollPos
				});
			}
		}
	});
})(jQuery);