Closing a modal

[hiegl]

Hi,

I started to use the built-in modals in Impeka recently instead of external plugins. Now I wonder, why a modal con only get closed by clicking the close-button in the top-right corner.
If one has a small modal the close button is really very far away from the modal. Here are my proposals:

a) Let a modal get closed by ESC-key.
b) Option to have the close button inside the modal and not far away.
c) Option to close the modal by clicking outside of it.

Is anything of these already possible and I didn’t see it?

Thanks,
Bernhard

Topic

[Marius1989]

I guess it is everything possible you mentioned, but there are no settings inside the theme options.

But there are in-built options inside the modal library they use. You can close the modals via ESC and also via BG Overlay click. It’s just the decision of the team to disable them or not to enable them. Not sure what the dedault values are. You can get everything you need here: dimsemenov.com/plugins/magnific-popup/documentation.html

Search for “closeOnBgClick” and “enableEscapeKey”

b) should be a tiny CSS snippet which will provide you the required result.

I know that might not the way you were looking for, but since there are no options for that available in the backend, at least I want to hint you a possible solution.
Not sure if there will be these options in the future, since over the years, here and there I remember people to ask for these options a) + c).

[hiegl]

Sounds interesting. I will look for this code. b) is not that important, if we can solve a) and c).

[hiegl]

Just discovered a glitch, that could be a bug. The demo page showing the modals is here:

Modals

Using an iPad: If I click one of the modals below (Team, Newsletter), the closing button is partly outside of the screen. Surprisingly this happens only, before the page is scrolled. If I scroll down a little bit and open the modals again, the closing button is placed correctly.

Could anyone please check and confirm. The position of the closing button seems to have problems with the sticky header, if I am right.

Thanks,
Bernhard

• This reply was modified 4 years ago by hiegl.

[Marius1989]

Might be a GSAP issue.
There are a couple of scrolling issues regarding this. I already mentioned something here regarding the safe button but since I got turned down, I didn’t report about the other stuff.
Can’t confirm since I don’t have an iPad right now to check.

But let me add, on Firefox, the modal closing icon doesn’t render correctly.
On desktop, it just doesn’t show at all. On mobile, there are some sizing issues (not consistently).
Maybe someone can confirm.

[hiegl]

I can confirm, that the problem only occurs here with Firefox/Mac.
Chrome and Safari render the closing icon fine.

[hiegl]

Just discovered that the safe button overlay can be closed by the ESC-key. It is though a very special effect, that does not match my clients design. So I would prefer to use the modal. Maybe the small glitches with Firefox could be fixed. Would be great. 🙂

[Marius1989]

You can pretty easily tweak the Safe Button animation if you are familiar with GSAP.

In addition, I think it would be a really easy task to close a Modal on ESC or overlay click with a couple of lines jQuery, you should try that.
I guess the modal has some deeper integration into the theme so the actual modal plugin options won’t work here.

There is a close on ESC reference inside the main.js, maybe someone of the team can elaborate for you.
I agree, it is not a great UX decision, to have these 2 options not implemented as default.

[hiegl]

Thanks to the team for implementing this! 🙂

[Author]

Replies