How to make a modal window from an image?

I have the following HTML:

<div class="row">
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center wow fadeIn">
<a href="assets/img/our_works/big_img/1.png">
<img class="preview" src="assets/img/our_works/1.png" alt="window"></a>
</div>
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center wow fadeIn" data-wow-delay="0.1s">
<a href="assets/img/our_works/big_img/2.png">
<img class="preview" src="assets/img/our_works/2.png" alt="window"></a>
</div>
           
        </div>

I need to write a JS script so that when a user clicks on an image modal window appears with a bigger image (big_img/1.png) with a half transparent background.

I wrote this code:
const previewImages = document.querySelectorAll(".preview");

previewImages.forEach((previewImage) => {
 
  previewImage.addEventListener("click", (event) => {
   
    event.preventDefault();
    
    const imagePath = event.target.src;
    const bigImagePath = imagePath.replace("our_works", "our_works/big_img");

but then stuck how it is better to do without inserting additional code into HTML.

The approach would be to actually create the HTML element(s) for the modal in your JS-code and then append it to the document.

W3Schools has actually a good modal image tutorial, which you could easily alter, check it out: https://www.w3schools.com/howto/howto_css_modal_images.asp

What you want to change there is instead of getting the modal from existing document, you want to create the modal elements within your JS code and append it to the document. But as personal thought: I think it's much cleaner to have the modal already in HTML, to keep a proper seperation of concerns.