{"id":167,"date":"2017-01-31T18:19:52","date_gmt":"2017-01-31T18:19:52","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=167"},"modified":"2017-01-31T18:19:52","modified_gmt":"2017-01-31T18:19:52","slug":"modals","status":"publish","type":"page","link":"https:\/\/radialcircle.com\/index.php\/modals\/","title":{"rendered":"Elements – Modals"},"content":{"rendered":"

[vc_row full_width=\u201dstretch_row\u201d][vc_column]\n\t\t\t

\n\t\t\t\t

$\"\"$ <\/div>\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

[vc_column_text]<\/p>\n

Modals<\/h1>\n
These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n
\n
Explore all of Stack\u2019s modular elements
\nat the\u00a0Element Index Page \u2192<\/a>[\/vc_column_text]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/vc_column][\/vc_row][vc_section css=\u201d.vc_custom_1498220906182{padding-top: 0px !important;}\u201d][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJhbGVydCUyMGJnLS1lcnJvciUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyYWxlcnRfX2JvZHklMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTNFJTNDc3Ryb25nJTNFTm90ZSUzQSUzQyUyRnN0cm9uZyUzRSUyME1vZGFscyUyMGFyZSUyMG5vdyUyMGZ1bGx5JTIwY29tcGF0aWJsZSUyMHdpdGglMjBWYXJpYW50JTIwdGhhbmtzJTIwdG8lMjBvdXIlMjBuZXclMjBmcmVlJTIwcGx1Z2luJTJDJTIwU3RhY2slMjBNb2RhbHMuJTIwRm9yJTIwZGV0YWlscyUyMGFuZCUyMGRvd25sb2FkJTBBJTIwc2VlJTIwJTNDYSUyMGhyZWYlM0QlMjJodHRwJTNBJTJGJTJGd3d3LnRvbW11c3Job2R1cy5jb20lMkZmcmVlLXBsdWdpbi1zdGFjay1tb2RhbHMtc2ltcGxlLW1vZGFsLWV4dGVuc2lvbi1zdGFjay13b3JkcHJlc3MlMkYlMjIlM0V0aGlzJTIwYmxvZyUyMHBvc3QuJTNDJTJGYSUzRSUzQyUyRnNwYW4lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmFsZXJ0X19jbG9zZSUyMiUzRSVDMyU5NyUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRQ==[\/vc_raw_html][vc_empty_space]
[vc_column_text]<\/p>\n
Basic Modal<\/h4>\n
Modals in Stack are easy to set up and trigger from any element on the page. At their most basic usage, an element with class .modal-trigger<\/strong> inside the same .modal-instance<\/strong> triggers the modal to appear.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033 el_class=\u201dxx\u201d]\n\t\t
\n\t\t\tTrigger Modal<\/a>\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t[vc_column_text]<\/p>\n
Here is a basic text modal<\/h2>\n
\n
Stack\u2019s visual style is simple yet distinct, making it an ideal starting point for your project whether it be a basic marketing site, or multi-page company presence.<\/p>\n
[\/vc_column_text]\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Autoshow Modal<\/h4>\n
Modals can be triggered automatically after a period of time once the page has been loaded by adding data-autoshow=\u201d\u201d<\/strong> to the .modal-container<\/strong> element. The attribute requires a numerical value in milliseconds, ie. a value of 1000 would show the modal 1 second after the page has loaded.<\/p>\n
[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]\n\t\t
\n\t\t\tTrigger Modal<\/a>\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t[vc_column_text]<\/p>\n
Here is an autoshow modal<\/h2>\n
\n
Stack\u2019s visual style is simple yet distinct, making it an ideal starting point for your project whether it be a basic marketing site, or multi-page company presence.<\/p>\n
[\/vc_column_text]\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Cookies Enabled Modal<\/h4>\n
Adding attribute data-cookie<\/strong> to any modal container will make the modal a one-time modal. When the modal is dismissed, a browser cookie is set, and the modal is permanently dismissed. Any future page views will not show the modal. The cookie will suppress modals shown via triggers and via autoshow. The text set in the `data-cookie` modal will be used as the name for the cookie.<\/p>\n
The one-time modal is handy to alert users to a message which they can \u201caccept\u201d or \u201cagree\u201d to, such as an EU Cookies law notice, a promo\/sale or a newsletter signup offer.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033][\/vc_column][\/vc_row][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
Exit Modal<\/h4>\n
\u201cExit\u201d modals can be used to draw the user\u2019s attention to a promotion or any other alert when their mouse leaves a particular element on the page. Exit modals use the data-show-on-exit<\/strong> attribute to set a selector matching the element where the user\u2019s mouse must exit to show the modal. This means that you could set this selector to match your \u201cCheck Out\u201d button, the body of the page, or even a single section on your page so the modal shows when the user scrolls past it. You could also use an exit modal to draw attention back to the page when the user\u2019s mouse leaves the browser window.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=\u201d1\/2\u2033]
[vc_column_text]<\/p>\n
An \u201cexit modal\u201d will show immediately, each time your mouse leaves this box.<\/p>\n
[\/vc_column_text]<\/div><\/div>\n\t\t
\n\t\t\tTrigger Modal<\/a>\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t[vc_column_text]<\/p>\n
This is an exit modal<\/h2>\n
\n
With Stack, you can easily configure modals to appear when your user\u2019s mouse leaves a specific element.<\/p>\n
[\/vc_column_text]\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t[\/vc_column][\/vc_row][\/vc_section]<\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"
[vc_row full_width=\u201dstretch_row\u201d][vc_column][\/vc_column][\/vc_row][vc_section css=\u201d.vc_custom_1498220906182{padding-top: 0px !important;}\u201d][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJhbGVydCUyMGJnLS1lcnJvciUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyYWxlcnRfX2JvZHklMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTNFJTNDc3Ryb25nJTNFTm90ZSUzQSUzQyUyRnN0cm9uZyUzRSUyME1vZGFscyUyMGFyZSUyMG5vdyUyMGZ1bGx5JTIwY29tcGF0aWJsZSUyMHdpdGglMjBWYXJpYW50JTIwdGhhbmtzJTIwdG8lMjBvdXIlMjBuZXclMjBmcmVlJTIwcGx1Z2luJTJDJTIwU3RhY2slMjBNb2RhbHMuJTIwRm9yJTIwZGV0YWlscyUyMGFuZCUyMGRvd25sb2FkJTBBJTIwc2VlJTIwJTNDYSUyMGhyZWYlM0QlMjJodHRwJTNBJTJGJTJGd3d3LnRvbW11c3Job2R1cy5jb20lMkZmcmVlLXBsdWdpbi1zdGFjay1tb2RhbHMtc2ltcGxlLW1vZGFsLWV4dGVuc2lvbi1zdGFjay13b3JkcHJlc3MlMkYlMjIlM0V0aGlzJTIwYmxvZyUyMHBvc3QuJTNDJTJGYSUzRSUzQyUyRnNwYW4lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmFsZXJ0X19jbG9zZSUyMiUzRSVDMyU5NyUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRQ==[\/vc_raw_html][vc_empty_space][\/vc_column][vc_column width=\u201d1\/2\u2033 el_class=\u201dxx\u201d][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][\/vc_column][vc_column width=\u201d1\/2\u2033][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column width=\u201d1\/2\u2033][\/vc_column][vc_column width=\u201d1\/2\u2033][\/vc_column][\/vc_row][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom:…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":"","footnotes":""},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8yNrc-2H","_links":{"self":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages\/167"}],"collection":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":0,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"wp:attachment":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}