2023-05-31T07:49:00.png

function showImage() {
  var imageUrl = "yu.jpg";
  var imageContainer = document.getElementById("image-container");
  imageContainer.innerHTML = '';

  var imageDiv = document.createElement("div");
  imageDiv.style.position = "fixed";
  imageDiv.style.top = "0";
  imageDiv.style.left = "0";
  imageDiv.style.width = "100%";
  imageDiv.style.height = "100%";
  imageDiv.style.backgroundColor = "rgba(0,0,0,0.5)";
  imageDiv.style.zIndex = "9999";

  var closeButton = document.createElement("button");
  closeButton.innerText = "X";
  closeButton.style.position = "absolute";
  closeButton.style.top = "10px";
  closeButton.style.zIndex = "9999";
  closeButton.style.bottom = "4.0rem";
  closeButton.style.width = "3rem";
  closeButton.style.height = "3rem";
  closeButton.style.right = "0.5rem";
  closeButton.style.zindex = "200";
  closeButton.style.border = "0";
  closeButton.style.outline = "0";
    closeButton.style.color = "white";
    closeButton.style.cursor = "pointer";
    closeButton.style.borderRadius = "55px";
    closeButton.style.fontWeight = "bold";
    closeButton.style.textAlign = "center";
    closeButton.style.backgroundColor = "#00a558";
    closeButton.style.opacity = ".70";
    closeButton.style.fontSize = "2rem";
  closeButton.onclick = function() {
    imageContainer.innerHTML = ''; 
  };
  var image = document.createElement("img");
  image.src = imageUrl;
  image.style.position = "absolute";
  image.style.top = "50%";
  image.style.left = "50%";
  image.style.transform = "translate(-50%, -50%)";

  imageDiv.appendChild(closeButton);
  imageDiv.appendChild(image);
  imageContainer.appendChild(imageDiv);
};