Open/close modal

[dportilla0001]

I’m trying to make a popup appear and disappear. To do this I’ve a modal like so:

<div id="modal">
	<div id="header">
		<h2>Modal</h2>
		<button id="target">&times;</button>
	</div>
	<div id="body">
		<p>Soooo.. Put what ever!</p>
	</div>
</div>

Then I style it:

#modal {
	opacity: 0;
	border: 1px solid brown;
	border-radius: 10px;
}

#target {
	margin: 1px 15px;
	width: 27px;
	height: 27px;
	outline: none;
	border: 2px solid brown;
	background-color: white;
	border-radius: 20px;
}

#header {
	padding: 1px 15px;
	display: flex;
	justify-content: space-between;
	padding: 1px 15px;
	border-bottom: 1px solid brown;
}

#body {
	padding: 1px 15px;
}

#modal.active {
	opacity: 1;
}

afterwards, i jump into my js and create two function:

function open(nut) {
	if (nut == null) {
		return;
	}
	nut.classList.add("active");
}

function close(nut) {
	if (nut == null) {
		return;
	}
	nut.classList.remove("active");
}

next, I make that work:

function showThing(tr, tr2, mt) {
   tr.addEventListener('click', close(mt))
   tr2.addEventListener('click', open(mt))
}

for some reason, this does not work properly. Am I doing something wrong?

link to codepen: https://codepen.io/Dims09/pen/poRrKWP?editors=0010

[imendieta]

Hi @dportilla0001

Just by looking at your code seems you have it all wrong as far as the HTML markup is concerned, you have a button wrap in div, and when you try to add some CSS it will disappear the button by default. That’s why you cant see anything. Your js also have some issues maybe you want first to get the HTML to get a better structure.

Here is the starting point… I will provide you with a basic HTML skeleton markup. you will have a modal, a button, and an X to close the modal. It’s very important that you target your id’s and classes, in order to use them in your CSS/JS, by manipulating in the DOM.

<div class="my-Modal" id="modal">
  <div class="modal-content">
    <h2>Welcome to my title modal</h2>
    <span id="close-modal">X</span>
  </div>
</div>

<button id="open-modal">Open my Modal</button> 

Now you have a better structure and targeting classes and id’s in order to show and hide the modal.

Can you try to hide the modal using pure JS ? and then we can go with some basic styles to make it like a modal.

[dportilla0001]

Thank you, @imendieta

I have restructured my HTML, and have hidden the modal in Javascript.
Here is the new link:
New Codepen

Thanks profoundly,
Dimitri

[imendieta]

Hi, @dportilla0001

Glad you had it working! 2 points that will help you.

1. I notice you have a bunch of code all mixed witch I believe task or testing that you are doing. I think you should keep each task separate because sometimes mixing code related to the different tasks might have some functionality issues.

2. In your js file your hiding the modal with js by adding styles, but I think you can do something much simpler, for the user to understand.

This is one alternative of many. I made two functions with their respective events because thats something you also have in your example but i made it more easy to understand for other developers and for you.

Hope this helps.

// add an event listener on the click button 
document.getElementById('open-modal').addEventListener('click', showModal);

// another event to click and close the modal.
document.getElementById('close-modal').addEventListener('click', hideModal);

// One function to show the modal
function showModal(){
  // Grab the element class modal and show it by adding the style.
  var modal = document.querySelector('.my-modal');
  modal.classList.add('show');
};

// Second function to close the modal.
function hideModal(){
  // grab the element class modal and hide it by removing the style.
  var modal = document.querySelector('.my-modal');
  modal.classList.remove('show');
};