Skip to content

Instantly share code, notes, and snippets.

@jonathanKingston
Created July 18, 2016 16:03
Show Gist options
  • Save jonathanKingston/b28ac17ffb1b7268f87ea7f7f0b9fac0 to your computer and use it in GitHub Desktop.
Save jonathanKingston/b28ac17ffb1b7268f87ea7f7f0b9fac0 to your computer and use it in GitHub Desktop.
Modal html
.overlay {
display: flex;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
justify-content: space-around;
align-content: space-around;
align-items: center;
}
.modal {
background-color: #fbfbfb;
background-clip: content-box;
color: #424e5a;
font-size: 14px;
border: 1px solid transparent;
border-radius: 3.5px;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
display: -moz-box;
margin: 0;
padding: 0;
}
.modal[resizable="true"] {
resize: both;
overflow: hidden;
min-height: 20em;
min-width: 66ch;
}
.modal-header {
display: flex;
padding: 3.5px 0;
background-color: #F1F1F1;
border-bottom: 1px solid #C1C1C1;
align-items: center;
}
.modal-header h3 {
flex: 1;
font-size: 1em;
text-align: center;
margin: 0;
}
.modal-body {
padding: 20px;
color: #424e5a;
font-size: 14px;
}
.modal-header button {
border: 0;
background-color: transparent;
}
.close-icon {
min-height: 16px;
min-width: 16px;
background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
}
.close-icon:hover {
background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
}
function createModal(options) {
const overlayEl = document.createElement('div');
overlayEl.className = 'overlay';
const modalEl = document.createElement('div');
modalEl.className = 'modal';
modalEl.setAttribute("resizable", true);
const modalHeaderEl = document.createElement('div');
modalHeaderEl.className = 'modal-header';
modalEl.appendChild(modalHeaderEl);
if (options.title) {
const titleEl = document.createElement('h3');
titleEl.textContent = options.title;
modalHeaderEl.appendChild(titleEl);
}
const closeMethod = () => {
overlayEl.parentNode.removeChild(overlayEl);
};
const closeEl = document.createElement('button');
closeEl.className = 'close-icon';
closeEl.ariaLabel = 'Close';
closeEl.addEventListener('click', closeMethod);
modalHeaderEl.appendChild(closeEl);
const modalBodyEl = document.createElement('div');
modalBodyEl.className = 'modal-body';
modalEl.appendChild(modalBodyEl);
if (options.bodyCallback) {
options.bodyCallback(modalBodyEl, closeMethod);
}
overlayEl.appendChild(modalEl);
return overlayEl;
}
function preferences(userContextId) {
const modalEl = createModal({
title: 'Container Preferences',
bodyCallback: (bodyEl, close) => {
const doneEl = document.createElement('button');
doneEl.addEventListener('click', () => {
// TODO
close();
});
doneEl.textContent = 'Done';
bodyEl.appendChild(doneEl);
}
});
document.body.appendChild(modalEl);
// TODO
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment