I have created a webpage in HTML/PHP/JS/CSS. The Images are fetched from the database as small thumbnails and when clicked it gets zoomed or pop up with a download button inside a modal. The download button is created with JavaScript, but I don't understand why that is not working.

I tried to inspect from browsers inspect tool and I saw that download button "href" is not showing, may be that's why it is not getting redirected to download page.

I tried to Minimize the code as much as possible .

My php code which fetches image from database as cards/thumbnails with modal html.

<div >
    <img data-id="download.php?file=<?php echo $row['img_name'] ?>"
     src="uploaded/<?php echo $row['img_name'] ?>" alt="">
</div>

<div id="modal">
    <div >
        <span >&#10006;</span>
    </div>
    <div >
    </div>
</div>

MY javascript code for modal and download Button.

let images = document.querySelectorAll(".card > img")
    //loop over all the images and bind an eventlistener on click to each images 
    for (i = 0; i < images.length; i  ) {
        let img = images[i]
        img.addEventListener('click', showModal, false)     
    }

    let modal = document.querySelector("#modal")

    function showModal() {

        //display mdodal
        modal.style.display = 'flex';

        //select modal body element
        let modalBody = document.querySelector(".modal-body");

        //clear previously displayed image
        modalBody.innerHTML = ""
       
        //create an image element 
        let modalImg = document.createElement('img');
        modalImg.src = this.getAttribute('src');
        
        //create download btn
        let downloadBtn = document.createElement('button');

        // Create the text node
        let link = document.createTextNode("Download");
        downloadBtn.appendChild(link);
        downloadBtn.href = this.getAttribute('data-id');


        // add image element to modal body
        modalBody.appendChild(modalImg);
        // add download btn 
        modalBody.appendChild(downloadBtn);

        body.style.overflow = "hidden";

    }

    let closeBtn = document.querySelector(".close-modal")
    closeBtn.addEventListener('click', closeModal, false)

    //close modal
    function closeModal() {
        modal.style.display = 'none';
        body.style.overflow = "auto";
    }

Last the download.php page

if(isset($_GET['file'])){
    $filename = basename($_GET['file']);
    $filepath = 'uploaded/'. $filename;
    if(!empty($filename) && file_exists($filepath)){
        header('Content-Description: File Transfer');
        header("Content-Type: application/octet-stream");
        header("Content-Disposition: attachment; filename=  $filename");
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($filename));
        readfile($filepath);
        exit;
    }
    else{
        echo "File not exists";
    }
}

MODAL CSS

#modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(111, 111, 111, 0.6);
    z-index: 100;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .top{
    width: 90%;
    text-align: end; 
    margin-bottom: 5px;
  }
  .close-modal {
    color: #fff;
    font-size: 20px;
    background-color: brown;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 5px;
  }
  .modal-body {
    width: 90%;
    text-align: center;
    
  }
  
  .modal-body img {
    width: 100%;
    margin-bottom: 2px;
  }
  .modal-body button{
    padding: 10px 15px;
    background-color: #8c2424;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 5px 1px #1b1b1b;
    text-transform: uppercase;
  }

CodePudding user response：

I believe your JS for setting the href is invalid, and should rather be using the setAttribute function, so you'd be changing:

downloadBtn.href = this.getAttribute('data-id');

to

let downloadUrl = this.getAttribute('data-id')
downloadBtn.setAttribute('href', downloadUrl);

You'll also need to change your button element to an a elements, so changing:

//create download btn
        let downloadBtn = document.createElement('button');

to

//create download btn
        let downloadBtn = document.createElement('a');

CodePudding user response：

I am also a person new to stack overflow. I suspect that your problem might have something to do with your CSS. Can you include the CSS in your question?

Yup, I think we are getting clearer.

#modal {
  ...
  display: none;
  ...
}

On page load, your modal is not being displayed because the CSS is hidden.

Then in your js file you have a listener applied to an img variable here:

img.addEventListener('click', showModal, false)

However, it doesn't look like we have an img variable declared, or you haven't included it in the code.

Also here you have a script with two close scripts.

  <script src="script.js"></script>
</script>