jquery-dialog
Version:
jQuery plugin that creates the basic interactivity for an ARIA dialog widget.
197 lines (178 loc) • 7.86 kB
HTML
<html lang="en">
<head>
<title>Demo: jquery-dialog</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
body.has-dialog {
overflow: hidden;
}
/* polyfill the 'hidden' attribute */
[hidden] {
display: none;
}
.dialog {
bottom: 0;
box-sizing: border-box;
left: 0;
position: fixed;
right: 0;
top: 0;
padding: 8px;
z-index: 1000;
}
.dialog__window {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 980px;
position: fixed;
overflow: auto;
overflow-x: hidden;
padding: 8px 0;
position: relative;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
.dialog__mask {
background-color: #000000;
height: 100%;
left: 0;
opacity: 0.6;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.dialog__header {
background-color: #fafafa;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
display: flex;
flex-shrink: 0;
font-size: 16px;
padding: 8px;
}
.dialog__title {
font-size: 1em;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.dialog__close {
background: none;
border: 0 none;
cursor: pointer;
float: right;
font-size: 1em;
margin: 0;
padding: 0;
white-space: nowrap;
}
.dialog__body {
background-color: #fafafa;
box-sizing: border-box;
padding: 0 16px 16px 16px;
overflow-y: scroll;
}
.dialog__body form {
margin: 16px 0;
}
</style>
</head>
<body>
<div role="main">
<h1>Demo: jquery-dialog</h1>
<p>jQuery plugin that creates the basic interactivity for an ARIA dialog widget.</p>
<p>View developer console for output.</p>
<p>Don't pay too much attention to the CSS styles here, it's only for rough demonstration purposes.</p>
<ul>
<li><button data-jquery-dialog-button-for="dialog" class="dialog-button" type="button">Dialog</button></li>
<li><button data-jquery-dialog-button-for="alert" class="dialog-button" type="button">Alert</button></li>
<li><button data-jquery-dialog-button-for="prompt" class="dialog-button" type="button">Prompt</button></li>
<li><button data-jquery-dialog-button-for="confirm" class="dialog-button" type="button">Confirm</button></li>
</ul>
<div role="dialog" class="dialog" id="dialog" aria-labelledby="dialog-title" hidden>
<div class="dialog__window" role="document">
<header class="dialog__header">
<h2 class="dialog__title" id="dialog-title">Lightbox</h2>
<button aria-label="Close Dialog" class="dialog__close" type="button">X</button>
</header>
<div class="dialog__body">
<p>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.</p>
<a href="http://www.ebay.com">www.ebay.com</a>
</div>
</div>
<div class="dialog__mask"></div>
</div>
<div role="dialog" class="dialog" id="alert" aria-labelledby="alert-title" hidden>
<div class="dialog__window dialog__window--medium" role="document">
<header class="dialog__header">
<h2 class="dialog__title" id="alert-title">Alert</h2>
</header>
<div class="dialog__body">
<p>Please read and acknowledge this alert.</p>
<form class="dialog__form">
<button type="submit">OK</button>
</form>
</div>
</div>
<div class="dialog__mask"></div>
</div>
<div role="dialog" class="dialog" data-jquery-dialog-type="prompt" id="prompt" aria-labelledby="prompt-title" hidden>
<div class="dialog__window dialog__window--small" role="document">
<header class="dialog__header">
<h2 class="dialog__title" id="prompt-title">Please enter your name</h2>
</header>
<div class="dialog__body">
<form class="dialog__form">
<div><input aria-labelledby="prompt-title" type="text" name="name" style="margin-bottom: 16px; width: 100%;"></div>
<div>
<button type="button">Cancel</button>
<button type="submit">OK</button>
</div>
</form>
</div>
</div>
<div class="dialog__mask"></div>
</div>
<div role="dialog" class="dialog" id="confirm" aria-labelledby="confirm-title" hidden>
<div class="dialog__window dialog__window--small" role="document">
<header class="dialog__header">
<h2 class="dialog__title" id="dialog-title">Are you sure?</h2>
</header>
<div class="dialog__body">
<form class="dialog__form">
<button type="button">Cancel</button>
<button autofocus type="submit">OK</button>
</form>
</div>
</div>
<div class="dialog__mask"></div>
</div>
</div>
<script src="browser.js"></script>
<script>
$(function() {
$('.dialog-button').dialogButton();
$('.dialog').on('dialogOpen', function(e, data) {
console.log(e.type, data);
});
$('.dialog').on('dialogClose', function(e, data) {
console.log(e.type, data);
});
// uncomment to show dialog on page load
//$('#dialog').dialog();
//$('#alert').dialog();
//$('#prompt').dialog();
//$('#confirm').dialog();
});
</script>
</body>
</html>