Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<head><title>aria-modal test</title>
</head>
<body><div id="fullContainer">
<header>
<h1>Modal Dialog test</h1>
</header>
<div>
<main>
<div>

<div id="container">
<h2>The background</h2>
<p>When a modal dialog is open, assistive technologies should not expose the inert page content. This is traditionally done by keeping the modal dialog in a div element that is the sibling of the page content, and use the <a href="http://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a> attribute to hide the page content while the modal dialog is visible.</p>
<p>But now there is, (or at least there should be), an easier way, the ARIA 1.1 <a href="http://www.w3.org/TR/wai-aria-1.1/#aria-modal">aria-modal</a> attribute.</p>
<p>If the attribute aria-modal="true" is present on the dialog element, (the element with role="dialog"), all content outside the dialog should be hidden from assistive technologies while the dialog is visible and focused.</p>
<p>This does not prevent keyboard navigation outside the dialog, but does help a great deal to make sure screen reader users do not try to interact with inert content that is visually marked as unavailable and cannot be accessed withthe the mouse.</p>
<p>The question is, what combinations of browsers and assistive technologies implement this attribute. Click the button below to find out for yourself.</p>
<button type="button" id="alert-trigger">sign me up</button>
</div>

</div>
</main>
</div>
<footer>
<div>This dialog is based on the <a href="https://dequeuniversity.com/library/aria/popups-dialogs/sf-modal-dialog">Deque University modal dialog example</a>. All instances of aria-hidden have been removed from the HTML source code and Javascript, and the aria-modal attribute has been added to the dialog container.</div>
</footer>
</div>
<div id="continue-dialog" role="dialog" aria-labelledby="admessagehead1" aria-describedby="admessagebody1" aria-modal="true">
<button type="button" id="continue-close">
Close dialog
</button>
<h2 id="admessagehead1">Sign Up</h2>
<div id="dialog-inner-wrapper">
<div id="admessagebody1" tabindex="-1">
Enter your contact information
</div>
<div>
<label for="first-name">First Name:</label>
</div>
<div class="error" id="first-name-error">
Please provide your first name
</div>
<div>
<input type="text" id="first-name" aria-required="true">
</div>
<div>
<label for="last-name">Last Name:</label>
</div>
<div class="error" id="last-name-error">
Please provide your last name
</div>
<div>
<input type="text" id="last-name" aria-required="true">
</div>
<div>
<label for="email-address">Email Address:</label>
</div>
<div class="error" id="email-address-error">
Please provide your email address
</div>
<div>
<input type="text" id="email-address" aria-required="true">
</div>
<div id="form-actions">
<button type="button" id="submit">Submit</button>
<button type="button" id="cancel">Cancel</button>
</div>
</div>
</div>
<div id="success-cage"></div>

</body>
              
            
!

CSS

              
                header {
position: relative;
text-align: center;
}
footer {
font-size: smaller;
margin-top: 2em;
text-align: center;
}
body>div>div, header {
margin: 0 auto;
max-width: 960px;
padding: 0 1em;
position: relative;
}

body {
margin:0;
padding:0;
}

#continue-dialog {
display: none;
position: absolute;
min-width: 200px;
margin: 0 auto;
text-align: center;
top: 70px;
z-index: 2000;
background-color: #fff;
border: 2px solid  #666;
border-radius:5px;
position:fixed;
width: 25%;
min-width: 300px;
left: 37%;
margin:auto;
top:20%;
line-height:1.5em;
}

#continue-dialog h2 {
margin: 0;
padding: 5px;
background-color: #eee;
border-radius: 5px 5px 0 0;
}

#admessagebody1 {
padding:5px;
display:inline-block;
}

#dialog-inner-wrapper {
padding:5px;

}

input[type=text] {
min-width:200px;
}

#success-bin {
font-size: 28px;
padding: 10px;
text-align: center;
border: 2px solid green;
}

#continue-close {
position: absolute;
top: 3px;
right: 3px;
}

#form-actions {
padding:10px 0;
}

.error {
display: none;
color: #666;
font-size: 15px;
font-style: italic;
text-align: center;
}

#temporaryOverlay {
position:absolute;
z-index:100;
background-color:#000;
opacity:0.2;
width:100%;
height:100%;
}

              
            
!

JS

              
                var successMarkup = '<div id="success-bin" aria-label="Success" role="alert" tabindex="-1">' +
'<div id="success-message">' +
'Thank you for providing your contact information!!' +
'</div>' +
'</div>';
var $trigger = $('#alert-trigger');
var $modal = $('#continue-dialog');
var $cancel = $('#cancel');
var $submit = $('#submit');
var $close = $('#continue-close');
var $first = $('#first-name');
var $last = $('#last-name');
var $email = $('#email-address');
var $container = $('#fullContainer');

// when the trigger is clicked, show the modal and focus it
$trigger.on('click', function (e) {
e.stopPropagation();
$('#success-cage').html('');
//$container.attr('aria-hidden', 'true');
$('body').prepend('<div id="temporaryOverlay"></div>');
$modal.show();
setTimeout(function () {
// $modal[0].focus();
$first.focus();
}, 0);
});

// when cancel is clicked, hide the modal and focus it's trigger
$cancel.on('click', function () {
$('#conf-error').hide();
$('#success-bin').hide();
//$container.removeAttr('aria-hidden');
$('#temporaryOverlay').remove();
$modal.hide();
$trigger.focus();
});

$close.on('click', function () {
$cancel.click();
});

// keyboard events on the modal itself
$modal.on('keydown', function (e) {
var which = e.which;
var target = e.target;

if (which === 9 && e.shiftKey) { // SHIFT + TAB
// shift+tab from "X" (close) button to the "Cancel" button
if (target === $close[0] || target === $modal[0]) {
e.preventDefault();
$cancel.focus();
}
} else if (which === 9) { // TAB
// tab from "Cancel" button to "X" (close) button
if (target === $cancel[0]) {
e.preventDefault();
$close.focus();
}
} else if (which === 27) { // ESCAPE
// click the cancel button which hides the modal and focuses it's trigger
$cancel.click();
}
});

// clicks on the modal's "Submit" button
$submit.on('click', function () {
var erroneousInputs = [];
// validation:
$([$first[0], $last[0], $email[0]]).each(function () {
// initial clean up:
$(this).removeAttr('aria-invalid').removeAttr('aria-describedby');
$('#' + this.id + '-error').hide();

if (!this.value) {
// applies aria-invalid="true" and associates the input
// with it's error message via `aria-describedby`
erroneousInputs.push(this);
$(this).attr({
'aria-invalid': 'true',
'aria-describedby': this.id + '-error'
});

// display the error message
$('#' + this.id + '-error').show();
}
});

if (!erroneousInputs.length) { // NO ERRORS!
$modal.hide();
$container.removeAttr('aria-hidden');
$('#success-cage').html(successMarkup);
$('#success-bin').focus();
} else {
// focus the first erroneous input
erroneousInputs[0].focus();
}
});


// clicking outside of the modal while the modal is
// open will close the dialog and focus the trigger
$(document).on('click', function (e) {
if ($modal.is(':visible') && !$(e.target).closest('#continue-dialog')[0]) {
$container.removeAttr('aria-hidden');
$('#temporaryOverlay').remove();
$modal.hide();
$trigger.focus();
}
});


              
            
!
999px

Console