Sticky "X" in Top Right Corner

Design help General
1

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:

Screen Shot 2020-12-15 at 1.23.03 PM
Screen Shot 2020-12-15 at 1.23.03 PM2560×1600 413 KB

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.

Any help would be greatly appreciated.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You’ll just want to move your sizing limitations to the text block itself (instead of the modal) so that only the text area is “scrollable”:

As I quickly mentioned, Finsweet’s custom scrollbar styler may be useful here to improve the styling of that internal scrollbar:

https://scrollbar-styler.webflow.io/

3

Thanks, Mike. Any ideas about this part?

Essentially, I want the user to be able to either click the “X” to dismiss the modal or click the grey background. Is this possible?

4

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.

5

@mikeyevin Do you mind recording a video showing what you mean? :slight_smile: