Easy and more efficient way to show multiple Popup modals?

Easy and more efficient way to show multiple Popup modals?
0

#1

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";
}

#2

You have posted a lot of code here. You will get more responses if you put your code into some like Codepen or JSFiddle, so we don’t have to put everything together a test ourselves. Plus, if we make suggestions, you can simply update your codepen and respond back and forth as we would all be looking at the same code without you having to repost any changes you make back into the forum.

To answer your question, if you were going to have many different text boxes, then you could do something like below. I had to modify some of your CSS and HTML, so the JavaScript could be written more generically.

HTML

<div class="popupBox">
  <div class="popupBoxWrapper">
    <div class="popupBoxContent">
      <h3></h3>
      <p></p>
      <p class="close-box">Click here to close</p>
    </div>
  </div>
</div>

<div id="wrapper">
  <p id="one" class="box-text">Click here to see popup box one.</p>
  <p id="two" class="box-text">Click here to see popup box two.</p>
</div>

CSS

.popupBox{
  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

var box = document.querySelector('.popupBox');

// When the user clicks to open modal
document.getElementById('wrapper').addEventListener('click', function(event){
  var elem = event.target;
  box.querySelector('h3').innerText = 'Popup Box ' + elem.id;
  box.querySelector('p').innerText = 'You are currently viewing popup box ' + elem.id + '.';
  box.style.display = box.style.display === 'block' ? 'none' : 'block';
});

// When the user clicks to close modal
document.querySelector('.close-box').addEventListener('click', function(event){
    box.style.display = "none";
});

#3

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


#4

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.


#5

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.


#6

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


#7

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.


#8

You will notice @alhazen1 had a much different solution, but it accomplishes basically the same thing. Another solution which combines my solution and @alhazen1’s is almost totally JavaScript driven.

The CSS is the same as I had above, except that I removed the display: block; from the popupBox class as it is not longer needed. The approach below is probably not as efficient as the first, because you are creating/appending and removing DOM elements instead of just changing the display property of the element, but I wanted to offer a different approach. My second solution is written with arrow function syntax and ES6 syntax features such as declaring variable as a constant with const.

HTML

<div id="wrapper"></div>

JS

const showBox = boxNum => `
  <div class="popupBoxWrapper">
    <div class="popupBoxContent">
      <h3>Popup Box ${boxNum}</h3>
      <p>You are currently viewing popup box ${boxNum}</p>
      <p class="close-box">Click here to close</p>
    </div>
  </div>`;

const textBoxes = ['one', 'two']; 

// iterate through textBoxes to generate wrapper's inner html
wrapper.innerHTML = textBoxes.reduce((html, box) => html += `
  <p id="${box}" class="box-text">Click here to see popup box ${box}.</p>`, '');

// When the user clicks to open modal
wrapper.addEventListener('click', event => {
  const elem = event.target;
  const popup = document.createElement("div");
  popup.classList.add("popupBox");
  popup.innerHTML = showBox(elem.id);
  document.body.append(popup);
});

// When the user clicks to close modal
document.body.addEventListener("click", event => {
  if (event.target && event.target.classList.contains("close-box")) {
    event.target.closest(".popupBox").remove();
  }
});


#9

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. @RandellDawson :slight_smile:


#10

Because I wanted you to really read through it and understand and type it out instead of just copying/pasting it. I did not blur the 2nd approach, so I gave you more on that one. :grin:


#11

Ohhhhh @RandellDawson 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…