{"id":987,"date":"2018-05-29T20:39:21","date_gmt":"2018-05-29T20:39:21","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=987"},"modified":"2018-06-27T22:00:49","modified_gmt":"2018-06-27T22:00:49","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/modal\/usage\/","title":{"rendered":"Usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tModal<br \/>\n\t<\/h1>\n<h2>\n\t\tOverview<br \/>\n\t<\/h2>\n<h4>\n\t\tModals communicate information via a secondary window and allow the user to maintain the context of a particular task. Use Modals sparingly because they interrupt user workflow.<br \/>\n\t<\/h4>\n<p>Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation\/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content.<\/p>\n<p>For usage requiring a quick choice from the user,\u00a0<a href=\"https:\/\/sites.neoninspire.com\/style-guide\/components\/dialog-boxes\/\">Dialog<\/a>\u00a0may be a more appropriate control.<\/p>\n<h2>\n\t\tStructure<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Header\" target=\"_self\"><br \/>\n\t\tHeader<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Include a heading within the Modal that mirrors the action or button that was clicked by the user. Headers include a close button \u201cx\u201d in the upper right-hand corner of the Modal.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Body\" target=\"_self\"><br \/>\n\t\tBody<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>The body content within a Modal should be as minimal as possible. Components that may be used in Modals include: Form fields, Text Area, Select, and Radio Buttons.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Footer\" target=\"_self\"><br \/>\n\t\tFooter<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>The footer area of a Modal typically contains a set of buttons. Refer to\u00a0<a href=\"https:\/\/sites.neoninspire.com\/style-guide\/buttons\/\">Button\u00a0<\/a>guidelines for usage.<\/p>\n<h2>\n\t\tUsage<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Dismissal\" target=\"_self\"><br \/>\n\t\tDismissal<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Using the \u201cx\u201d in the upper right-hand corner of the Modal<\/li>\n<li>Pressing the\u00a0<code>ESC<\/code>\u00a0key<\/li>\n<li>Clicking \/ touching outside of the Modal area<\/li>\n<\/ul>\n<h2>\n\t\tVariants<br \/>\n\t<\/h2>\n<h5>\n\t\tButton Type<br \/>\n\t<\/h5>\n<h5>\n\t\tPurpose<br \/>\n\t<\/h5>\n<p><strong>Informational<\/strong><\/p>\n<p>Transactional Modals are used to validate user decisions or to gain secondary confirmation from the user. Typically, the Modal requests either a &#8216;yes&#8217; or &#8216;no&#8217; response.<\/p>\n<p><strong>Success\u00a0<\/strong><\/p>\n<p>Modals used in this case include input areas that the user may interact with. These may include but are not limited to Forms, Dropdowns, Selectors, and Links.<\/p>\n<p><b>Danger<\/b><\/p>\n<p>When an action has harmful intentions to the user&#8217;s data (delete, remove, etc.) and requires a secondary confirmation from the user.\u00a0<\/p>\n<h2>\n\t\tBest Practices<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Do\" target=\"_self\"><br \/>\n\t\tDo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Use Modals for actionable interactions, such as needing the user to provide information or change settings.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>When possible, try a non-blocking Modal before resorting to a blocking Modal.<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Don&#039;t\" target=\"_self\"><br \/>\n\t\tDon&#8217;t<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Don\u2019t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Components Modal Overview Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Use Modals sparingly because they interrupt user workflow. Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation\/input, or can be used to advertise new app features.&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":982,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-987","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=987"}],"version-history":[{"count":8,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/987\/revisions"}],"predecessor-version":[{"id":1107,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/987\/revisions\/1107"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/982"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}