Close button on product image modal

[thehurricane]

Hello,

how I can add "Close" button to product image pop-up on product page? I know that I have too edit product-images-modal.tpl file, I've added [X] image (close button) - with normal <img src> tag, but when I click it nothing happens, and when I click near to this image modal is closing. Should I give any directive to img src tag? Something like #close-modal?

 

Thanks for help.

[Rolige]

Hello:

Probably you need a directive as you mention or add a JS code. Something like this:

onclick="$(this).close();"

Regards

[Dandry]

Hi, I know this topic is quite old but I was also looking for the solution and it turned out to be super easy. Prestashop default product modal uses Bootstrap Modal under the hood. You can easily add Bootstrap-like button to close the modal without additional JS code to handle this event:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">×</span>
</button>

This piece of code is from the official Bootstrap docs.

Best regards.

[giasemis]

On 2/8/2020 at 7:58 PM, Dandry said:

Hi, I know this topic is quite old but I was also looking for the solution and it turned out to be super easy. Prestashop default product modal uses Bootstrap Modal under the hood. You can easily add Bootstrap-like button to close the modal without additional JS code to handle this event:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">×</span>
</button>

This piece of code is from the official Bootstrap docs.

Best regards.

Thank you Dandry. 

It works great! 

I added in file 

in file templates/catalog/_partials/product-images-modal.tpl  just after the image line 31

          <img class="js-modal-product-cover product-cover-modal" width="{$product.cover.large.width}" src="{$product.cover.large.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" itemprop="image">
... here...