0

I have modal window which opens when user clicks on div. Everything works fine except one thing, when I click again on the div, the modal window does not open again.This is my code:

<div onclick="document.getElementById('id01').style.display='block'" class="mkdf-elements-holder-item-content mkdf-elements-holder-custom-184744" style="padding: 300px 0 200px 0">


     <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header style="background-color:transparent;" class="w3-container w3-teal"> 
        <span onclick="zavri();"
        class="w3-button w3-display-topright">&times;</span>
        <h2 style="background-color:transparent; color: transparent"> V </h2>
      </header>
      <div class="w3-container">
<iframe id="ifr" width="560" height="315" src="https://www.youtube.com/embed/u9dC7xIl1oU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen allowscriptaccess="always"></iframe>
      </div>
    </div>
  </div>

<script>
    function close(){
        $("#id01").css("visibility", "hidden");
                    autoOpen: false,
          $("#ifr").attr("src","");
    }
</script>
Lochness123255
  • 1
  • 2
  • 1
    Are you sure everything is working? I ask as there's an obvious syntax error in your JS. Could you please edit the question to show a full working example – Rory McCrossan Apr 06 '20 at 09:46

1 Answers1

0

It looks like you use display: block to open the modal but use visibility: hidden to close it.

You should probably stick with the display property and use display: none to close the modal. This way, it will not be rendered once hidden unlike with visibility: hidden.

This answer is a good read on the difference between the two.

Julien Verneaut
  • 338
  • 1
  • 9