[ISSUE]? why are some of the dashboard buttons in the foreground?

This is the dashboard :

I clic on the picture to enlarge ( it's a UI_template node with this html code : https://www.w3schools.com/howto/howto_css_modal_images.asp) :

Why some buttons are in second layer while other are in first layer ?

Help is appreciate, thanks


If you use that actual code as shown in the link, try modifying the css:

.modal {
z-index: 1


z-index: 100

If that doesn't work, you need to determine what the z-index of the buttons are (right click on one -> inspect element and check the properties), the modal should have a higher z-index to cover them.

yeah ! very good :

Thanks @bakman2

One last question @bakman2 : I would like to close this "enlarged image" window by clicking outside the image (in the black part), and not just on the cross. What would be the code to add to close the modal?

You could try to add this to the javascript:

modal.onclick = function() { 
  modal.style.display = "none";

whoow : nice !! Is it possible that the click is active only outside the image as in this example https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close
and it will be perfect :slight_smile:

i found :

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";

It's ok thanks @bakman2

1 Like