Html page not responding to first button click

I am trying to build my own css/javascript popup. The code works fine on the first button click and on the overlay click.

When I try to reload the popup I have to click the button twice for it to function, It seems like the javascript is not resetting the csv back to its original state.

html

    <div id="shade" class="shade" onclick="myFunction('mdiv',0,0)" ></div>
    <div id="mdiv" class="mdiv"><img src="./graphics/volunteer.webp" style="max-width:98%; width:98%;" /></div>
    <button onclick="myFunction('mdiv',300,350)" >Click me</button>

css

 .shade {
  background-color: rgba(0,0,0,0.3);
  bottom: 0;
  cursor: pointer;
  display: none;
  height: 100%;
  left: 0;
  opacity:0;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 1s;
  width: 100%;
  z-index: 2;
  }
 .mdiv {
  background-color:white;
  border:4px solid blue;
  border-radius:12px;
  border-style:double;;
  box-shadow: 2px 1px 18px 10px rgba(255,255,255,0.75);
  display:none;
  height:0;
  left:50%;
  opacity:0;
  padding:15px;
  position:absolute;
  text-align:center;
  top:50%;
  transform: translate(-50%,-50%);
  transition: width 1s, height 1s, opacity 1s;
  width:0;
  z-index:10;
  }

javascript

     var vw = 0;
 var vh = 0;

 function myFunction(idx, vw, vh) {
    if (document.getElementById(idx).style.display === "none") {
        document.getElementById('shade').style.display = "block";
        setTimeout(function() {
            document.getElementById('shade').style.opacity = 1;
        }, 100);
        document.getElementById(idx).style.display = "block";
        setTimeout(function() {
            document.getElementById(idx).style.width = vw + 'px';
        }, 100);
        setTimeout(function() {
            document.getElementById(idx).style.height = vh + 'px';
        }, 100);
        setTimeout(function() {
            document.getElementById(idx).style.opacity = 1;
        }, 100);
    } else {
        setTimeout(function() {
            document.getElementById(idx).style.width = '0px';
        }, 100);
        setTimeout(function() {
            document.getElementById(idx).style.height = '0px';
        }, 100);
        setTimeout(function() {
            document.getElementById(idx).style.opacity = 0;
        }, 100);
        document.getElementById(idx).clientWidth = 0;
        if (document.getElementById(idx).style.opacity == 0) {
            document.getElementById(idx).style.display = "none";
        }
        setTimeout(function() {
            document.getElementById('shade').style.opacity = 0;
        }, 100);
        setTimeout(function() {
            document.getElementById('shade').style.display = "none";
        }, 600);
    }
 }

Could anyone help please?