midzer / tobii

An accessible, open-source lightbox with no dependencies
https://midzer.github.io/tobii/demo/
MIT License
196 stars 20 forks source link

Close button position #85

Open viliusle opened 2 years ago

viliusle commented 2 years ago

In most cases close button in top-right corner works. But not in all cases. If we have lots of small images or using inline HTML feature (modal window will be small) or having big screen, close button should be closer to actual content. User focus will be in center, and to exit, he will need to waste time searching for close button and move mouse to close button.

The problem, it is hard to achieve it even with custom CSS, because current HTML layout will not let you do this easily. We should try to find a way to solve it.

p.s. I am not suggest to change it globally, but to have such ability with data- attribute. It would probably be breaking change.

midzer commented 2 years ago

Do you think about having something like data-position="top-left" for each element to set the close button position? This would mean we can override current close button css via JavaScript. What positions do you want to offer?

If we leave top-right as default, there would be no breaking change, as it is just optional.

viliusle commented 2 years ago

Possible values would be only 2, I do not see why we should add more options.

midzer commented 2 years ago

Yeah, if you need this feature @viliusle just open up a PR and we can discuss the changes.

viliusle commented 2 years ago

I do not need it anymore, because I found a way using hacky CSS, but problem remains. Still it is hard to fix it in current version, so low priority I guess.