Fullscreen mobile modal: how hard can it be?
1–10 of 45 posts
Re: Fullscreen mobile modal: how hard can it be?
#2"Full screen modal dialog" is just another way of saying "a page" right? So some HTML and you are done?
I am not sure but from the name of the repo I am guessing this is referring to React JavaScript framework which I think is purely "single page application" deal which would explain the limitation of not being able to load a separate page.
Shame we are reimplementing the wheel for such trivial and basic use-cases. Oh well.
Re: Fullscreen mobile modal: how hard can it be?
#3"Full screen modal dialog" is just another way of saying "a page" right? So some HTML and you are done? I am not sure but from the name of the repo I am guessing this is referring to React JavaScript framework which I think is purely "single page application" deal which would explain the limitation of not being able to load a separate page. Shame we are reimplementing the wheel for such trivial and basic use-cases. O…
Not exactly "a page", as with a modal you are not messing with the browser history and you expect to keep the exact state of the page underneath the modal
Re: Fullscreen mobile modal: how hard can it be?
#4"Full screen modal dialog" is just another way of saying "a page" right? So some HTML and you are done? I am not sure but from the name of the repo I am guessing this is referring to React JavaScript framework which I think is purely "single page application" deal which would explain the limitation of not being able to load a separate page. Shame we are reimplementing the wheel for such trivial and basic use-cases. O…
In some cases a replacement with window.open/target=_blank in combination with window.opener might be possible (especially if loading an iframe in the modal otherwise). It requires browser sniffing though, if you still want to keep the modal experience on desktop/tablet.
Re: Fullscreen mobile modal: how hard can it be?
#5I miss the days when a form was just a form, and as a user I could decide its font size, I could zoom in on it, and I could scroll it as I wished.
Re: Fullscreen mobile modal: how hard can it be?
#6Interesting that it's so hard. But also this shows that you really really shouldn't do this - you need 4 horrible hacks to get it to work on one browser. What are the chances that it will work reliably on other browsers, or even the same browser but different versions or configurations? Pretty miniscule I'd say.
Just use a separate page.
Re: Fullscreen mobile modal: how hard can it be?
#7"Full screen modal dialog" is just another way of saying "a page" right? So some HTML and you are done? I am not sure but from the name of the repo I am guessing this is referring to React JavaScript framework which I think is purely "single page application" deal which would explain the limitation of not being able to load a separate page. Shame we are reimplementing the wheel for such trivial and basic use-cases. O…
Not exactly "a page", as with a modal you are not messing with the browser history and you expect to keep the exact state of the page underneath the modal
I'm in two minds here - a set of tools/patterns exist for a reason so this is a useful write-up for the difficulties involved with doing modals. On the other hand, it is always a warning indicator when the browser/hardware is fighting against me.
In this particular case I feel "modal" is an implementation detail - as long as you don't break the UX contracts (i.e. browser history is left unchanged and page state under modal is remembered) does it matter how you achieve the modal-like behaviour?
In this particular case, it could be easier to render the modal using some HTML and/or CSS and hold onto whatever state was underneath - if you're using React, there's no reason to not transition to a different page and either pass the state to the next component OR use something like Redux so you can recall application state.
Re: Fullscreen mobile modal: how hard can it be?
#8I miss the days when a form was just a form, and as a user I could decide its font size, I could zoom in on it, and I could scroll it as I wished.
...but you were on a desktop machine then. You could press hot keys to zoom the fonts up a size and whizz up and down with a scroll wheel. On mobile it is different.
Re: Fullscreen mobile modal: how hard can it be?
#9"Full screen modal dialog" is just another way of saying "a page" right? So some HTML and you are done? I am not sure but from the name of the repo I am guessing this is referring to React JavaScript framework which I think is purely "single page application" deal which would explain the limitation of not being able to load a separate page. Shame we are reimplementing the wheel for such trivial and basic use-cases. O…
React works well for SPAs, but is not limited to them.
Either way, though, this does feel like an odd problem to be trying to solve. If you already are a JS app, just handle the blur events to stop them from going to another part of your page. The browser will still let them close the page (or the entire browser), but you can control the UX within your own app.
Whether or not that is a good idea is also a valid discussion. Because if you have to go to such lengths to get the UX you want on a mobile device, odds are you are going to end up with a sub-optimal UX, as mobile apps mostly match conventions.
Re: Fullscreen mobile modal: how hard can it be?
#10Even if you get full screen modals working well on mobile, they are a bad UX if only because of the trauma inflicted by all the broken attempts out there.