<div class="AccessibleModal-container js-modal-container" id="modal-container" tabindex="-1">
<div class="AccessibleModal-overlay u-background-dark-translucent" data-a11y-dialog-hide tabindex="-1"></div>
<div role="dialog">
<div class="AccessibleModal " role="document" style="padding: 1rem; max-width: 500px; height: 40rem;">
<div class="row " style="">
<div class="col _span-12 " style="">
<form id="" action="#" method="POST" class="Form " style="">
<h2 class="u-text-size-500 " style="">
Request a Demo for More Information
</h2>
<div class="row " style="">
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="First Name"
type="text"
class=""
placeholder="Bruce"
autocomplete
/>
</label>
</div>
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="Last Name"
type="text"
class=""
placeholder="Wayne"
autocomplete
/>
</label>
</div>
</div>
<label>
<span>
Text
</span>
<input
id="text"
name="Email"
type="email"
class=""
placeholder="bruce@wayneenterprises.com"
autocomplete
/>
</label>
<div class="row " style="">
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="Company Name"
type="text"
class=""
placeholder="Wayne Enterprises"
autocomplete
/>
</label>
</div>
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="Phone Number"
type="tel"
class=""
placeholder="800-867-5309"
autocomplete
/>
</label>
</div>
</div>
<label>
<span>
TextArea
</span>
<textarea
id="textarea"
name="Notes"
class=""
style=" "
placeholder="I would like to cover..."
rows="3"
autocomplete
></textarea>
</label>
<div class="row " style="text-align: center;">
<div class="col _span-12 " style="">
<button class="button _large _submit " type="submit">
Submit Request
</button>
<p id="" class="fineprint " style="">Someone from our sales team will be in touch soon with more information or to schedule a private demonstration.</p>
</div>
</div>
</form>
</div>
</div>
<button aria-controls="modal-container" class="IconButton AccessibleModal-x _small" data-a11y-dialog-hide="modal-container">
<span class="u-text-screenreader">Close this dialog window</span>
</button>
</div>
</div>
</div>
<div
class="AccessibleModal-container js-modal-container"
id="{{id}}"
tabindex="-1"
>
{{!-- tabindex is for when javascript fails --}}
<div
class="AccessibleModal-overlay {{overlaymodifier}}"
data-a11y-dialog-hide
tabindex="-1"
></div>
<div
{{#if title}}aria-labelledby="{{title}}"{{/if}}
role="dialog"
>
<div
class="AccessibleModal {{modifier}}"
role="document"
style="{{style}}"
>
{{#if title}}
{{title}}
{{/if}}
{{> @children }}
<button
aria-controls="{{id}}"
class="IconButton AccessibleModal-x {{closemodifier}}"
data-a11y-dialog-hide="{{id}}"
>
<span class="u-text-screenreader">Close this dialog window</span>
</button>
</div>
</div>
</div>
{
"id": "modal-container",
"title": null,
"modifier": null,
"overlaymodifier": "u-background-dark-translucent",
"closemodifier": "_small",
"style": "padding: 1rem; max-width: 500px; height: 40rem;",
"children": [
{
"component": "row",
"context": {
"children": [
{
"component": "column",
"context": {
"span": 12,
"children": [
{
"component": "form"
}
]
}
}
]
}
}
]
}
import each from './../../../../modules/util/each';
import A11yDialog from 'a11y-dialog';
class SproutAccessibleModal {
/*
This is a wrapper for the a11y-dialog So that it can work better with our components
*/
constructor(props) {
this.defaultProps = {
main: document.querySelector('.js-page-container'), //this is going to need to be added to containers
modals: document.querySelectorAll('.js-modal-container'),
openControls: []
};
this.props = Object.assign({}, this.defaultProps, props);
}
//grab all elements with that appropriately reference the Modal's ID
setOpenControls(modalId) {
//Every element that with an aria-controls attribute that matches our dialog id, except controls with data-a11y-dialog-hide
var modalOpenControls = [].slice.call(
document.querySelectorAll('*[aria-controls="' + modalId + '"]:not([data-a11y-dialog-hide])')
);
each(modalOpenControls, el => {
el.addEventListener('click', event => event.preventDefault());
el.setAttribute('data-a11y-dialog-show', modalId);
});
return modalOpenControls;
}
enhanceModal(el) {
//now that we're using a11y-dialog, the modal doesn't need to be tabbable or audible until we say so.
el.removeAttribute('tabindex');
el.setAttribute('aria-hidden', 'true');
//add enhanced to let css know that now we're using a progressively enhanced modal
el.classList.add('is-enhanced');
}
buildA11yModal(el) {
this.setOpenControls(el.id);
this.enhanceModal(el);
const a11yModal = new A11yDialog(el, this.props.main);
// When opening and closing the modal add overflow hidden
// to the body element to prevent scrolling
a11yModal.on('show', () => {
document.body.style.overflow = 'hidden';
});
a11yModal.on('hide', () => {
document.body.style.overflow = 'visible';
});
if (el.getAttribute('data-show')) {
a11yModal.show();
}
return a11yModal;
}
buildA11yModals() {
each(this.props.modals, el => {
el.a11yModal = this.buildA11yModal(el);
});
}
}
export default SproutAccessibleModal;
@import "../../../Axioms";
.AccessibleModal-container {
display: none;
&:target,
&.is-enhanced {
display: block;
}
&.is-enhanced[aria-hidden=true] {
pointer-events: none;
}
}
.AccessibleModal-overlay {
.AccessibleModal-container.is-enhanced & {
@include ZIndex("Modal-overlay");
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
transition: opacity $transition-time-300;
will-change: opacity;
}
.AccessibleModal-container.is-enhanced[aria-hidden=true] & {
opacity: 0;
}
}
.AccessibleModal {
position: relative;
width: 100%;
margin: 0;
background: theme-color(background);
.AccessibleModal-container.is-enhanced & {
@include Elevation("Modal", $withZindex: true);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-height: 100vh;
margin: auto;
overflow-y: scroll;
}
.AccessibleModal-container.is-enhanced[aria-hidden="true"] & {
display: none;
}
&-x {
@include Elevation("Button", $withZindex: true, $hasShadow: false);
@include font-size-head;
position: absolute;
top: .5rem;
right: .5rem;
display: none;
font-weight: 400;
line-height: .5;
color: get-color(neutral, 500);
background-color: transparent;
border: none;
cursor: pointer;
transition: transform $transition-time-default $transition-timing-interaction;
will-change: transform;
&::after {
content: "×";
}
&:hover,
&:focus {
color: theme-color(text);
transform: scale(1.2);
}
}
.AccessibleModal-container.is-enhanced &-x {
display: block;
}
.AccessibleModal-container.is-enhanced &-x._small {
@include font-size-subhead;
}
}