Hi everyone. I am trying to finish my portfolio website, and I am having some issues with the “X” that gets displayed in the top right corner of my modal:
Because the user is able to scroll to read the description of my apps, I want the “X” to stay visible as the user is scrolling. Currently, once the user is done reading, they need to scroll back up to access the “X”. I tried making the button sticky, but that seems to mess with its positioning. I am also not able to figure out how to allow the user to click on the grey background to dismiss the modal.
I thought at one one point you could just add the same “Close Modal” interaction to the container element (the one that darkens the site behind the modal container) but after testing that out it looks like that doesn’t take into account z-index—which means that clicking anywhere on the screen would close the modal.
This may be a bug, but you can get around this by adding separate elements that take up the space around the modal container and adding the interaction to a shared class used by all of those elements. Seems a bit overkill, but it should work in the meantime.