<h1>Popup IMG</h1>

<input type="url" id="img" placeholder="http://example.com/img.png" />
<button onclick=showImageInPopup(window.img.value)>Ok</button>

input {
  width: 500px;
}

const closeIconBase64 =
  "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNNDQzLjYsMzg3LjFMMzEyLjQsMjU1LjRsMTMxLjUtMTMwYzUuNC01LjQsNS40LTE0LjIsMC0xOS42bC0zNy40LTM3LjZjLTIuNi0yLjYtNi4xLTQtOS44LTRjLTMuNywwLTcuMiwxLjUtOS44LDQgIEwyNTYsMTk3LjhMMTI0LjksNjguM2MtMi42LTIuNi02LjEtNC05LjgtNGMtMy43LDAtNy4yLDEuNS05LjgsNEw2OCwxMDUuOWMtNS40LDUuNC01LjQsMTQuMiwwLDE5LjZsMTMxLjUsMTMwTDY4LjQsMzg3LjEgIGMtMi42LDIuNi00LjEsNi4xLTQuMSw5LjhjMCwzLjcsMS40LDcuMiw0LjEsOS44bDM3LjQsMzcuNmMyLjcsMi43LDYuMiw0LjEsOS44LDQuMWMzLjUsMCw3LjEtMS4zLDkuOC00LjFMMjU2LDMxMy4xbDEzMC43LDEzMS4xICBjMi43LDIuNyw2LjIsNC4xLDkuOCw0LjFjMy41LDAsNy4xLTEuMyw5LjgtNC4xbDM3LjQtMzcuNmMyLjYtMi42LDQuMS02LjEsNC4xLTkuOEM0NDcuNywzOTMuMiw0NDYuMiwzODkuNyw0NDMuNiwzODcuMXoiLz48L3N2Zz4=";
const styleRules = `
body {
  margin: 0;
}
.icon {
  position: fixed;
  right: 0;
  top: 0;
  margin: 18px;
  min-width: 1.5em;
  min-height: 1.5em;
  width: 2.5vh;
  height: 2.5vh;
  max-width: 2.0em;
  max-height: 2.0em;
  background: white;
  border-radius: 50%;
  padding: 24px;
  outline: 0;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px rgba(0, 0, 0, 0.14), 0 1px 14px rgba(0, 0, 0, 0.12);
}
`;

function showImageInPopup(contentUrl) {
  if (!contentUrl) {
    alert("Please use Image URL");
    return;
  }

  const styleSheet = document.createElement("style");
  styleSheet.innerHTML = styleRules;

  const newWin = window.open("about:blank", "_blank", "popup=1");
  newWin.document.write(`
    <style>
    @page {
      size: A4;
      margin: 0;
    }
    </style>
    <a href="javascript: self.close()">
      <img src="${closeIconBase64}" class="icon" alt="">
    </a>
    <img loading="eager" width="100%" src="${contentUrl}" alt="">
  `);

  newWin.document.head.appendChild(styleSheet);
}