Easy and more efficient way to show multiple Popup modals?

Hello everyone i try to show some modals when the user click on the links paragraphs, they show and they close, But i think im writing to much code or rewrite code… again, so its there is any other way i can manage to just make only one function to show popup modal and to close it ? knowing that has to show different content in both, any ideas ?
thank you so much.

<!DOCTYPE html>
	<head>
		<title>Simple Popup Boxes</title>
	</head>
	<body>
		<div id="popupBoxOnePosition">
			<div class="popupBoxWrapper">
				<div class="popupBoxContent">
					<h3>Popup Box 1</h3>
					<p>You are currently viewing popup box 1.</p>
					<p id="closebox1">Click here</a> to close popup box one.</p>
				</div>
			</div>
		</div>

		<div id="popupBoxTwoPosition">
			<div class="popupBoxWrapper">
				<div class="popupBoxContent">
					<h3>Popup Box 2</h3>
					<p>You are currently viewing popup box 2.</p>
					<p id="closebox2">Click here</a> to close popup box two.</p>
				</div>
			</div>
		</div>

		<div id="wrapper">
			<p id="box1">Click here</a> to see popup box one.</p>
			<p id="box2">Click here</a> to see popup box two.</p>
		</div><!-- wrapper end -->
	</body>
</html>

css file



			#popupBoxOnePosition{
				top: 0; left: 0; position: fixed; width: 100%; height: 120%;
				background-color: rgba(0,0,0,0.7); display: none;
			}
			#popupBoxTwoPosition{
				top: 0; left: 0; position: fixed; width: 100%; height: 120%;
				background-color: rgba(0,0,0,0.7); display: none;
			}
			.popupBoxWrapper{
				width: 550px; margin: 50px auto; text-align: left;
			}
			.popupBoxContent{
				background-color: #FFF; padding: 15px;
			}

js code

//pop1 
var e = document.getElementById('popupBoxOnePosition');
 var close = document.getElementById('closebox1');

document.getElementById('box1').addEventListener('click', function(){
  if(e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
});

// When the user clicks on Click here to close modal
close.onclick = function() {
    e.style.display = "none";
}

//pop2 js
 var elpopupBoxTwoPosition = document.getElementById('popupBoxTwoPosition');
 var closeclosebox2 = document.getElementById('closebox2');

document.getElementById('box2').addEventListener('click', function(){
  if(elpopupBoxTwoPosition.style.display == 'block')
    elpopupBoxTwoPosition.style.display = 'none';
  else
    elpopupBoxTwoPosition.style.display = 'block';
});
  
// When the user clicks on Click here to close modal
closeclosebox2.onclick = function() {
    elpopupBoxTwoPosition.style.display = "none";
}

I put this into a codepen and then bodged it into general one modal for all messages solution. Just a demo of concept, not a finished work. you would need to clean it up some (a lot).

Mostly using your logic and variable names but a few changes. Also note where I changed id to class in html box1, box2 to box

Fork this so you have your own copy

Thank you so much for the information Randell, and i will take into concideration yuor help and tips in order to get more responses with codepen so, everyone can test, the code, i appreciate all the help.

Thank you so much alhanzen1 its really helpfull trying to find new ways so the code can be more efficient and more easy to read in order to not make to much lines of code or rewrite to much… I aprreicate all your help, and yes this is what im looking forward,

Thank you so much.

You’re very welcome. I would take the time to look carefully over @camperextraordinaire 's code. He is a very proficient programmer and has probably come up with a more elegant and detailed solution.

yes he is pretty good too! there are good programmers here… like you and him and i will keep learning here as we go and learn many ways around JS and mainly Vanilla JS.

Hello Mr Randell,
Thank you so much for the information and the help!!! you really good at it and, and i thank you so much… i appreciate all your help, this is really important to me as a move forward with pure vanilla js, this is also another way of doing it witch i love it too!!!.. thats just perfect as well both you and @alhazen1 had great solutions. i love all of them although i have to said yours are really professional, and well structured, also one more question why on your first solution i cannot have the code, its blur when i click on it … thank you.

Thank you so much, i learning so much from you Mr. @camperextraordinaire :slight_smile:

Ohhhhh @camperextraordinaire trust me I’m typing and learning as i get to know more approach like you, yes it helps me get to learn more as i type and read what you actually did, im learning already what you did :slight_smile: so its good, love it!!! thank you for the big help the second approach its really interesting cant wait to read it and as well type it. Your really good, Thank you so much i learn a lot from you Mr Randell. This helps a lot…