OmkeshwarGupta/task8.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal</title>
</head>
<style>
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 10%;
    border-radius: 15px;
  }

  img:hover {
    border: 8px violet;
    border-style: ridge;
  }

  .mod-con {
    display: block;
    background-color:white;
    width: 800px;
    box-shadow:0 6 10 ;
    border-radius: 10px;
    text-align: center;
    border: solid black 0.05px;
    box-shadow: 10px 5px 5px black;
    padding: 10px;
  
  }
  .mod{
    display: none;
    position: absolute;
    top: 50%;
     left: 20%;
    
  }
  #close{
    color: white;
    background-color: gray;
    border-radius: 5px;
  }
  #down{
    color: white;
    background-color: rgb(5, 138, 190);
    border-radius: 5px;

  }
</style>

<body>
  <div id="img">
    <img src="https://raw.githubusercontent.com/CC-BHU/web-development/main/assets/images/task8.jpg"
      alt="Image Not found" onclick="popupfun()">

  </div>
  <div id="modal" class="mod">

    <div class="mod-con">
      <h2>Red Dahlia Flower</h2>
      <p>This is a rare Flower</p>
      <button id="close" onclick="closeFunction()">Close</button>
    <button id="down" onclick="downloadImage()">Download</button>

    </div>
    
  </div>


</body>
<script>
  var model = document.getElementById("modal");
  var img = document.getElementById("img");
  var close = document.getElementById("close");
  function closeFunction() {
    model.style.display = "none";
  }
  img.onclick = function () {
    model.style.display = "block";
  }
  function downloadImage() {
        const imageSrc = "https://github.com/CC-BHU/web-development/blob/main/assets/images/task8.jpg?raw=true";
        window.location.href = imageSrc;
  }
</script>

</html>