javascript – I do not recognize why my pop-up isn’t functioning

So I am presently working with an individual job yet can not obtain my modal to show up in the web browser. I have actually attempted investigating it yet I’m obtaining the exact same comeback that I am presently using.

This is my html code:

<< div course=" modal-container" id=" modal_container">
<> < div course=" modal">
<> < h1> > Modals are great <.
<< p> > technique message <.
<< switch course=" real45" id=" close1"> > Close Me <.
<.
<.

This is my CSS code:

 div.modal-container {
placement: dealt with;
top: 0;
left: 0;
elevation: 100vh;
size: 100vw;
background-color: rgba( 0,0,0,0.3);
screen: flex;
align-items: facility;
justify-content: facility;
opacity: 0;
pointer-events: none;.
}

. real45 {
background-color: #BC 6C25;.
boundary: 0;.
border-radius: 25px;.
shade: #fff;.
extra padding: 10px 25px;.
box-shadow: 0 2px 4px rgba( 0,0,0,0.2);.
}

. real45: float {
shade: black;.
}

. modal {
background-color: #fff;.
size: 600px;.
max-width: 100%;.
extra padding: 30px;.
border-style: strong;.
border-radius: 25px;.
box-shadow: 0 2px 4px rgba( 0,0,0,0.2);.
text-align: facility;.
}

. modal h1 {
margin: 0;.
}

. modal p {
opacity: 0.7;.
}

. modal-container. program {
opacity: 1;.
pointer-events: 1;.
}

This is my javaScript code:

 const open1 = document.getElementById(' open1');.
const modal_container = document.getElementById(' modal_container');.
const close1 = document.getElementById(' close1');.

open1.addEventListener(' click', () => > {
modal_container. classList.add(' program');.
} );.

close1.addEventListener(' click', () => > {
modal_container. classList.remove(' program');.
} );.

Please any kind of as well as all pointers rate I significantly value it.