Overlays

Modals Developer Notes

Information

For all modals an __mst_overlay div must be initialized. It is best practice to have this div on the outer-most layer of the DOM Body. This is to ensure that there aren't any other conflicting styles that may override the overlay element's position within the DOM. Recommended location to place this <div> tag is before the end of the <body> tag.

The presiding modal that needs to be displayed to the user should be nested within the __mst_overlay div tag as stated above. Modal specific examples of this shown in their relevant sections.

Code Usage


										<body>
											

										</body>

Standard Modal

Information

Standard modals can be used to convey any type of informational message that doesn't fit within a standard tooltip box. They will auto-size to 85% width and height of the device when below 992px breakpoint and 100% at 768px breakpoint.

Developers Note: only the __mst_modal class is required. The ID #defaultModal is used primarily for JavaScript toggling as well as demo purposes in this particular scenario.

Visual Example

Click on the button below for the visual representation of the Standard Modal.

Code Usage


										

											

										
												

													
ESTIMATIONS

													
												

												

													
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Content-Rich Modal

Information

Content-Rich modals are identical to standard modals in terms of development. This section is primarily to visualize how forms and rich-content within Modals.

Visual Example

Click on the button below for the visual representation of a Content-Rich Modal.

Code Usage

										
										

											

												
												

													
MODAL WITH RICH-CONTENT ELEMENTS

Login Modal

Information

Again, this modal isn't any different to the other modals that were displayed above. This is just a visual representation of how the modal would look with contents throughout the styleguide to form the basis of the Login Modal; e.g. Typography & Mericon components.

Developers Note: only the __mst_modal class is required. The ID #defaultModal is used primarily for JavaScript toggling as well as demo purposes in this particular scenario.

Visual Example

Click on the button below for the visual representation of the Standard Modal.

Code Usage


										

											

												

													
LOG IN:

Helper Classes

Information

This section will outline the various helper classes that should be called when initializing the Modal.

The presiding modal that needs to be displayed to the user should be nested within the __mst_overlay div tag as stated above. Modal specific examples of this shown in their relevant sections.

Code Usage

body.no-scroll

This class needs to be called and applied to the body whenever the overlay (.__mst_overlay) is called as it will prevent scrolling in the background.

NOTE: If including the modals.js javascript file then there is no need to remove the .no-scroll class from the body tag. If using the jQuery Library this can be applied by doing the following:

										$('body').addClass('no-scroll')

ESTIMATIONS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MODAL WITH RICH-CONTENT ELEMENTS

LOG IN: