Image option to open in a new Modal - lightbox

Current images size is too small in some use case .Currently i added js code to preform this .

// Create modal elements
var modal = document.createElement('div');
var modalContent = document.createElement('img');
var close = document.createElement('span');

// Set modal attributes
modal.style.display = 'none';
modal.style.position = 'fixed';
modal.style.zIndex = '1';
modal.style.paddingTop = '100px';
modal.style.left = '0';
modal.style.top = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.overflow = 'auto';
modal.style.backgroundColor = 'rgba(0,0,0,0.9)';

// Set modal content attributes
modalContent.style.margin = 'auto';
modalContent.style.display = 'block';
modalContent.style.width = '90%'; // Increase width to 90%
modalContent.style.maxWidth = '900px'; // Increase max-width to 900px

// Set close button attributes
close.textContent = '×';
close.style.position = 'absolute';
close.style.top = '15px';
close.style.right = '35px';
close.style.color = '#f1f1f1';
close.style.fontSize = '40px';
close.style.fontWeight = 'bold';
close.style.transition = '0.3s';
close.style.cursor = 'pointer';

// Append elements
modal.appendChild(close);
modal.appendChild(modalContent);
document.body.appendChild(modal);

// Add event listeners to images with "img" class and either "img-bg" or "img-border" class
var images = document.querySelectorAll('img.img.img-bg, img.img.img-border');
images.forEach(img => {
  img.addEventListener('click', function() {
    modal.style.display = 'block';
    modalContent.src = this.src;
  });
});

// Add event listener to close button
close.addEventListener('click', function() {
  modal.style.display = 'none';
});