Showing a popup show what's behind-CodePudding

When I show a popup, the circle used for decoration show up, I don't know how solve that,

Here's the fiddle :

some code
https://jsfiddle.net/MagikMike/pctb9e0n/

Thanks

CodePudding user response：

Give your circles IDs, in this case I added an ID circle0 and circle1 to both circles -

<div  id="popup1"><div  id="popup"></div></div>

<div >
  <div  id="circle0">
    <div >
      <div >
      </div>
    </div>
    <div ></div>
  </div>
  <span ></span>
  <div >
                <div>
                    <span>
                        Date : 00/00/0000
                    </span>
                    <div>
                        <span>
                            LOREM IPSUM
                        </span>
                    </div>
                </div>
                <div >
                    <img src="/image/icon/icn-plus.svg" alt=" "
                    onclick="show_popup(' . $user->getNum() . ',' . $monitorings->id[$i] . ');return false;">    
                </div>
            </div>
</div>
<div >
  <div id="circle1" >
    <div >
      <div >
      </div>
    </div>
    <div ></div>
  </div>
  <span ></span>
  <div >
                <div>
                    <span>
                        Date : 00/00/0000
                    </span>
                    <div>
                        <span>
                            LOREM IPSUM
                        </span>
                    </div>
                </div>
                <div >
                    <img src="/image/icon/icn-plus.svg" alt=" "
                    onclick="show_popup(' . $user->getNum() . ',' . $monitorings->id[$i] . ');return false;">    
                </div>
            </div>
</div>

In your JS, your circles still showed because you didn't target them and set the visibility to hidden; now that we have IDs associated with the two circles you can properly get and set the visibility when the pop up is shown.

function hide_popup()
{
   setTimeout(function()
   {
       document.getElementById('popup1').style.visibility = "hidden";
       document.getElementById('popup1').style.opacity = 0;
       document.getElementById('popup').innerHTML = "";
    }, 100);
}
function show_popup( user, monitoring )
{
    document.getElementById('circle0').style.visibility = "hidden";
    document.getElementById('circle1').style.visibility = "hidden";
    document.getElementById('popup1').style.visibility = "visible";
    document.getElementById('popup1').style.opacity = 1;
}

CodePudding user response：

You need to add a z-index for your popup wrapper like so.

#popup1 {
  z-index: 999;
}