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

Dashboard
1

This is the dashboard :

image
image654Ă—701 157 KB

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) :

image
image733Ă—735 253 KB

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

Help is appreciate, thanks

Chris

2

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

.modal {
...
z-index: 1

to:

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.

3

yeah ! very good :

image
image670Ă—707 239 KB

Thanks @bakman2

4

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?

5

You could try to add this to the javascript:

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

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:

7

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