JSFiddle - React, Tailwind, and code Playground

by Tommy

HTML

<p style="border:1px red; padding: 20px;">
this is the original content
</p>

JavaScript

function createModal(content, closeCb){
	const modalContent = document.createElement('div');
  modalContent.setAttribute("style", "position:fixed; top: 45%; left: 50%; margin-left:-250px; z-index: 999; padding: 10px; border-style: solid; border-width: 1px; border-color: #ced4da; border-radius: 5px; width: 500px; background:white");
  modalContent.innerHTML = '<br/>' + content;
  const x = document.createElement('strong');
  x.innerHTML = 'x';
  x.onclick = closeCb;
  x.setAttribute('style', 'float:right; cursor: pointer;');
  modalContent.prepend(x);
  return modalContent;
}

function createOverlay(){
	const overlay = document.createElement('div');
  overlay.setAttribute('style', 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99;');
  return overlay;
}

const infoBubble = document.createElement('div');
infoBubble.innerHTML = 'More Details';
infoBubble.onclick= () => {
	const o = createOverlay();
	const m = createModal('This is some text',() => {
  	document.body.removeChild(m);
    document.body.removeChild(o);
    infoBubble.style.display = 'initial';
  });
  infoBubble.style.display = 'none';
  document.body.append(o);
  document.body.append(m);
};
infoBubble.setAttribute("style", "position:fixed; top: 0; left: 0; z-index: 999; padding: 5px; margin: 5px; border-style: solid; border-width: 1px; border-color: #ced4da; border-radius: 5px; cursor: pointer; background: white;");

document.body.append(infoBubble);