jQuery在模态打开/关闭时添加或移除类

首先感谢大家的阅读。我对jQuery和JavaScript一窍不通，这就是我来这里的原因。

搜索了一下，我找到了我想要的代码，但不幸的是，我正在制作的画廊有几个元素，这段代码不像我想要的那样工作。

这是我的小脚本:

function showImage(imgName) {
    var curImage = document.getElementById('currentImg');
    var thePath = '/images/full/';
    var theSource = thePath + imgName;
    curImage.src = theSource;
    curImage.alt = imgName;
}

<span class="thumb_ef"><a href="#" class="activate_modal" name="first_window"><img src="images/thumb/image1.png" alt="Image One"/></a></span>
<span class="thumb_ef"><a href="#" class="activate_modal" name="second_window"><img src="images/thumb/image2.png" alt="Image Two"/></a></span>
<span class="thumb_ef"><a href="#" class="activate_modal" name="third_window"><img src="images/thumb/image3.png" alt="Image Three"/></a></span>
<div id="first_window" class="modal_window">
  
  <h2>Title here</h2>
  
  <div id="preview">
    <img id="currentImg" class="bigimg" src="images/full/image1.png" alt="images/full/image1.png">
  </div>
  
  <h3>Thumbnail preview</h3>
  
  <div id="thumb">
    <span class="thumb_mef"><img src="images/full/thumb_image1.png" alt="images/full/thumb_image1.png" onclick="showImage('image1.png');"></span>
    <span class="thumb_mef"><img src="images/full/thumb_image2.png" alt="images/full/thumb_image2.png" onclick="showImage('image2.png');"></span>
    <span class="thumb_mef"><img src="images/full/thumb_image3.png" alt="images/full/thumb_image3.png" onclick="showImage('image3.png');"></span>
    <span class="thumb_mef"><img src="images/full/thumb_image4.png" alt="images/full/thumb_image4.png" onclick="showImage('image4.png');"></span>
  </div>
  
</div>

让我解释一下，因为我不打算把所有不必要的代码都放在这里。

在图库中，我有几个小图像，当您单击它们时，会为每个图像触发一个具有不同ID的模态框，以便为每个元素加载不同的内容。

在模态中，我有一个标题，一个全尺寸图像和四个缩略图预览图像。这个缩略图图像触发我之前留下的代码，当您单击缩略图时，在相同的ID中加载完整尺寸的图像。

我的问题是……我需要为不同的模态重复这个ID，但是如果你想点击缩略图并加载任何其他模态的全尺寸图像，而不是第一个，你不会看到变化(因为代码在第一个ID上工作)。

我认为解决这个问题的方法是添加ID (currentImg)仅当模态打开，并在模态关闭时删除此ID后，以解决问题。

我不知道怎么做，可能我需要混合这两种代码但是，我对jQuery/Javascript一无所知，这是模态代码:

$(document).ready(function(){
	var window_width = $(window).width();  
	var window_height = $(window).height();  
	$('.modal_window').each(function(){
		var modal_height = $(this).outerHeight();
	var modal_width = $(this).outerWidth();
		var top = (window_height-modal_height) / 2;  
		var left = (window_width-modal_width) / 2;  
		$(this).css({'top' : top , 'left' : left});  
	});  
	  
	$('.activate_modal').click(function(){  
		var modal_id = $(this).attr('name');  
		show_modal(modal_id);
	});  
	  
	$('.close_modal').click(function(){  
		close_modal();  
	}); 
	function close_modal(){  
		$('#mask').fadeOut(500);  
		$('.modal_window').fadeOut(500);  
	}
	function show_modal(modal_id){  
		$('#mask').css({ 'display' : 'block', opacity : 0});
		$('#mask').fadeTo(500,0.8);  
		$('#'+modal_id).fadeIn(500);  
	}
});

希望你能理解，我的母语不是英语，有不懂的请告诉我

$(document).ready(function(){
		var window_width = $(window).width();  
		var window_height = $(window).height();  
		$('.modal_window').each(function(){
		    var modal_height = $(this).outerHeight();  
		    var modal_width = $(this).outerWidth();  
		    var top = (window_height-modal_height) / 2;  
		    var left = (window_width-modal_width) / 2;  
		    $(this).css({'top' : top , 'left' : left});  
		});  
	  
		$('.activate_modal').click(function(){  
			var modal_id = $(this).attr('name');  
			show_modal(modal_id);
			$('#'+modal_id).find('.bigimg').attr('id', 'currentImg');
		});  
	  
		$('.close_modal').click(function(){
			$('.bigimg').removeAttr('id');
			close_modal();
		}); 
		function close_modal(){  
		    $('#mask').fadeOut(500);  
		    $('.modal_window').fadeOut(500);  
		}
		function show_modal(modal_id){  
		    $('#mask').css({ 'display' : 'block', opacity : 0});
		    $('#mask').fadeTo(500,0.8);  
		    $('#'+modal_id).fadeIn(500);
		}
	});