CSS how do I add transition to my modal using javascript

Question

I am a bit new to CSS and I know there are more topics like this around. But none seem to be the solution for my problem. So after 2 hours of trying all sort of hidden, transition, display etc and with the risk of posting a duplicate here is my question.

How do I make this modal show up smooth using CSS and Javascript?

The CSS

/* The Modal (background) */
.modalestate {
  visibility: hidden; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 25;

  top: 15;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  transition: all ease 1s;
}

/* Modal Content/Box */
.modalestate-content {
  background-color: rgba(0,0,0,0.0);
  margin: 12% auto; /* 15% from the top and centered */
  padding: 22px;
  float:left;
  width: 550px; /* Could be more or less, depending on screen size */
   transition: all ease 1s;
}

/* The Close Button */
.closeestate {
  color: #aaa;
  float: right;
  font-size: 20px;
  font-weight: bold;
}

.closeestate:hover,
.closeestate:focus {
  color: whitesmoke;
  text-decoration: none;
  cursor: pointer;
}

The divs to show the modal and its content:

     <div id="mymodelestate" class="modalestate">
 <div class="modalestate-content">
    <span class="closeestate">&times;</span>
    
    <div id="responsecontainer" align="center"></div>
    
    </div></div>

The Javascript:

<script>
// Get the modal
var modal = document.getElementById("mymodelestate");

// Get the button that opens the modal
var btn = document.getElementById("btnestate");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("closeestate")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.visibility = "visible";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.visibility = "hidden";
}

// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {

  if (event.target == modal) {
    modal.style.visibility = "hidden";
  }
});</script>

Thanks in advance guys !

Answer 1

What kind of "transition" are you trying to do? What effect do you want to apply to your modal? It's not very clear, but I'm going to guess you are trying to have the modal fade in and fade out slowly as the user clicks the buttons. This assumption comes from the fact you are using visiblity:hidden/visible.

If you are trying to have a fade-in/fade-out effect, you need to set the opacity to 0 instead:

opacity: 0;

And when you want to display it, you set opacity to 1.

However, you are going to run into many other issues. Though, I will say this will be a good learning exercise to familiarize yourself with how elements in HTML work and their interactions with CSS.

EDIT: As promised from my comments, I'll provide an example here and some advice.

First, you have the BODY. This BODY, is literally like a human body. You attach elements to it (or human parts). You have this down pretty good, you even use the z-index so I won't go over this too much. I know more "advanced" devs are going to say something about the DOM blah blah it's not attached yada yada, but we're going to keep it simple here.

Next is that the elements all have a initial attribute associated to them. For example, a DIV element has inline-block as an initial attribute. P element tag has some margin and is a block element. Etc etc. You can obviously override these with CSS or add extra attributes as you have been doing. By giving an element a CLASS, you are creating your own custom element of sorts (though it is still it's base element, DIV, P, A, SPAN, etc)

Next is understanding all of these attributes. You seem to know a good deal amount of attributes so I won't go over much, but I will go over these:

• Visibility - The element still exists on the BODY. It's there, it still touches everything and affects everything around it. Think of it as an invisible arm on a human body. You can still use that arm and touch things, make things move, push things away, etc... It's just literally invisible. The GPU or whatever is driving graphics will simply NOT render this element.
• Opacity - Similar to visibility, but you get some more control. Opacity of 1 (or 100%) means the element is completely visible. An opacity of .5 or 50% means the element is only half seen. That means things behind it can be seen through it. The GPU is still rendering this element but you can now include transparency. 0 means it has complete transparency (basically it's invisible).
• Display - This is used to set how an element behaves in your body and how it interacts with other elements. You will often see or even use "display: none" which makes it seem like the element does not exist anymore (it's still there in HTML, though). It will no longer affect anything around it.

Now, what's more important is to understand some of the more complexities of these attributes. In your case, you should know about transitions. A transition attribute allows you to modify the browser's handling of attribute manipulation on an element. In simpler terms, as you know, it lets you create effects on elements, such as fading in, fading out, movement, etc. And it comes out nice and smooth (if done correctly).

However, these attributes that are being manipulated occur instantly. Thus, as mentioned, transitions give you that control to make it smooth. HOWEVER, it is important to note that these transitions will only work when an element already has attribute values to be manipulated. For example:

.MyDivClass{
    height: 32px;
    width: 32px;
    transition: all .3s ease;
}

.MyDivClassExtra{
    height: 64px;
    width: 64px;
}

The div will seem to grow larger over .3 seconds. That is because my height and width are set. If I did "NOT" set width/height or even set it to atuo, it will just happen instantly. Because there was no attribute to be manipulated! Even setting height/width to 0 will work, because at least it has an attribute to work with.

You have to sometimes set aside common sense when it comes to programming. Things like Visibility you'd assume if you turn it on and off with transition, it'll fade in nicely. However, no. Visibility is simple ON or OFF. There is nothing to transition into. With opacity, it is not just simply ON or OFF. There are 101 numbers (infinite actually, I guess...) to transition from. 0% to 100%. You can do decimals, too. The same is true with display. A little more complicated but simply put - there is only ON or OFF with display.

Some other notes on your code is that your .modelstate element is on top of everything. Your users won't be able to click anything because of this. Visibility hidden does not make it unclickable. Like I mentioned, it simply makes it invisible - it's still there affecting everything else.