Jump to content

Modalception!


thetuningspoon
 Share

Recommended Posts

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.

post-449-0-20442500-1452964609_thumb.gif

* Screencap also features the Page Field Edit Links module

  • Like 18
Link to comment
Share on other sites

  • 2 weeks later...
  • 7 months later...

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");

modalception.gif

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!

Link to comment
Share on other sites

hi thetuningspoon,

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

2nd modal on backend: all good

2016-09-15 22_50_25-Edit Page_ untitled-8 • mustangs.do2.baumrock.com.png

first modal on frontend: all good

2016-09-15 22_51_44-Program Manager.png

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

2016-09-15 22_52_16-Program Manager.png

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...

Link to comment
Share on other sites

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 :)

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...