I have a div that pops up when I click an tag. This is achieved using JS.

    display: none;
    background-color: #100E0B;
    position: absolute;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bolder;
    width: 15vw;
    left: 45%;
    top: 40%;
    color: white;
    height: 20vh;
    border-color: #0B0A08;
    border-width: .125vw;
    border-style: solid;
    word-wrap: break-word;
    padding: 1.3vh;
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
    transition: opacity 1s ease-in-out;


}

This is the CSS for the div that comes up after the is clicked.

function makeContactVisible() {
    var show = document.getElementById('showContact');
    
    show.style.display = "flex";
}

Here is the div:

        <div id = "showContact">
         <p id = "phoneNumber">+1 7</p>
         <p id = "email">@gmail.com</p>

        </div>

I have tried using: transition: opacity 1s ease-in-out;, but it has no effect, the div still instantly comes up.
I would also like to dim the background and “focus” the contact div when it is up.