Modal html

aboutContainers.css

  
.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);
}

aboutContainers.js

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
}