Html page not responding to first button click-CodePudding

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);
    }
 }

.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;
  }

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

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.

Could anyone help please?

Edit

Here is a CodePen link

https://codepen.io/dcsimp/pen/WNdLjwZ

CodePudding user response：

if you have inline style display:none for #mdiv . you can check that is none or not:

document.getElementById(idx).style.display === "none"

so i add an inline style display:none to #mdiv tag

<div id="mdiv"  style="display:none;"></div>

another problem is at this section

    if (document.getElementById(idx).style.opacity == 0) {
        document.getElementById(idx).style.display = "none";
    }

because when execute this code the if is not true (opacity not 0 yet) and style remain block
you can set display:none at the end of else statement and wait for transitions.

setTimeout(function() {
    document.getElementById('shade').style.display = "none";
    document.getElementById(idx).style.display = "none";
 }, 800);

and finally...

   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";
          document.getElementById(idx).style.display = "none";
            }, 800);
        
        }
     }

.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:0px;
  z-index:10;
   }

<div id="shade"  onclick="myFunction('mdiv',0,0)" ></div>
  <div id="mdiv"  style="display:none;"></div>
  <button onclick="myFunction('mdiv',200,250)" >Click me</button>

CodePudding user response：

as per this answer , Unfortunately the .style property only knows about the style properties set using that same

you're document.getElementById(idx).style.display is initially "" that's why its not working , what you can add is an empty check