Module Modalception!

[thetuningspoon]

Modalception for ProcessWire

GitHub: https://github.com/thetuningspoon/AdminModalception

Direct Download: https://github.com/thetuningspoon/AdminModalception/archive/master.zip

Modalception improves the usability of ProcessWire's modal dialog/popup windows when opened from within another modal window. The parent window is expanded to take up the full screen behind it so that additional modals can be opened without the inner windows becoming progressively smaller and less usable. The outer windows' toolbars are hidden from the user to help reduce confusion.

* Screencap also features the Page Field Edit Links module

[Pete]

Love the joke in the module title

[Nico Knoll]

Really cool. Would love to see this in the PW 3.0 final build (at latest) if possible

[LostKobrakai]

It could at least be configurable.

[bernhard]

hi thetuningspoon!

thanks for this module! unfortunately it does not work properly on frontend:

i included styles and scripts like this (using AIOM):

        $config->scripts->add("../modules/AdminModalception/AdminModalception.js");
        $config->styles->add("../modules/AdminModalception/AdminModalception.css");

any idea what could be the problem? any easy fix?

the files are definitely loaded, but the first modal gets 100% width and height as you can see in the screencast.

thank you for your help!

[thetuningspoon]

Hi @bernhard

I'm not sure that I'm seeing the issue from your screencast. Is the problem that the modal is bigger than you want it?

[bernhard]

hi thetuningspoon,

thank you for your quick answer. sorry for being unclear:

2nd modal on backend: all good

first modal on frontend: all good

second modal on frontend: first modal gets 100% width and height and overlaps the normal page.

ps: i tried if it has something to do with the pw-modal-small that i'm using but it's the same without that class!

i can also provide you a login to this site and you can see it yourself...

[thetuningspoon]

Ah, I understand now! This is actually the intended behavior, and if you look carefully, it is also how it works on the back end. The parent window is expanded to take up the full screen, with the effect that the entire interface zooms inward. 

[bernhard]

hm... not sure if i don't understand you or you don't understand me

pic1: there are 2 modals open, but you see only modal 2. in the background is the original processwire page and NOT the first modal.

pic2: frontend, 1 modal open. you only see modal 1 and in the background the original page (logo, menu)

pic3: frontend, 2 modals open, you see BOTH modals! modal 2 is open (thats good), BUT modal 1 is in the background and NOT the regular page.

do you understand now? or please let me understand what you mean

 

[thetuningspoon]

The expected behavior is what is occuring on the front end. I'm not sure why the parent modal is not visible in your back end example. I bet that if you go another layer deep, the parent modal will be visible in the background.

Is the parent modal being visible in the background problematic for your use case?

 

My original thought when creating this module was to make each window overlay the previous exactly so that the top parent window would always be visible in the background, but I found the "zoom" approach to be a much simpler and more programatically elegant solution to the problem.

[tpr]

@bernhard Do you get the same results with AOS off?

[bernhard]

On 17.9.2016 at 6:34 AM, thetuningspoon said:

The expected behavior is what is occuring on the front end. I'm not sure why the parent modal is not visible in your back end example. I bet that if you go another layer deep, the parent modal will be visible in the background.

Is the parent modal being visible in the background problematic for your use case?

no it is not. i can open as much modals as i want and they are all properly overlaying each other with the exact same size.

no, it's not problematic at all.

On 17.9.2016 at 7:38 AM, tpr said:

@bernhard Do you get the same results with AOS off?

does not make any difference, neither on frontend nor on backend.