UX nightmare: nested modals in theme (default & Reno)

[steveooo]

Hello guys,

I am using some nested PageTables and with every PageTable field the user clicks on, a modal window appears. Because every modal window's width & height are not 100%, every nesting step shrinks the window.

Does someone have any solution for this problem?

Best wishes,

steveooo

[Macrura]

Hi steveooo -

do you intend the users to nest the modals, or do you want to prevent the nesting? Are you asking for a way to make the successive modals to max out?

[tpr]

What I can think of as a quick fix to make the overlay 100% opaque and set modal sizes equal using custom CSS with a hook, perhaps in ready.php.

[steveooo]

Hi,

well. I do not want modal windows. Technically, they can be "modals" but 100% width and 100% height so do not see a window in a window.

How can I hook into that? Any working code?

[LostKobrakai]

You could ask Ryan to make InputfieldPageTable::getItemEditURL hookable. Then you could simply remove the "modal=1". Currently you could hook after InputfieldPageTable::renderTable and use string replacement to get rid of "&modal=1" on the whole table.

[tpr]

Playing with the dev tools it's easy to force the fullscreen modal by tweaking some css:

But would you know on which page you are if 3-4 lightbox layers are on top of each other?

[steveooo]

Hi. How have you done this? Could you make a screencast of nested windows (not just the first modal window?)

Thanks!

[tpr]

I was just overriding values in the dev tools (inspector). Unfortunately I have no PW install where there are nested lightboxes but just repeat the second half of the gif 2-3 times and you got the idea how it would look

The easiest way I guess is to add a custom stylesheet with the overriden values using this module:

http://modules.processwire.com/modules/admin-custom-files/

[tpr]

This kinda works:

Default theme:

Reno theme:

Add this to "/site/ready.php":

<?php

$page->addHookAfter('render', function ($event) {

    if ($this->page->template != 'admin') {
        return;
    }

    $styles = <<< HTML
    <style>
    .ui-widget-overlay + div.ui-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    .pw-modal-window {
        position: absolute !important;
        width: 100% !important;
        min-height: 100% !important;
    }
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        margin: -3.35em 3em 0 0;
    }
    body.AdminThemeDefault .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        margin: -2.66em 3em 0 0;
    }
    html:not(.modal) {
        height: 100%;
        overflow: hidden;
    }
    body:not(.modal) {
        overflow: auto;
        height: 100%;;
    }
    html.modal {
        height: 100% !important;
        overflow: hidden !important;
    }
    body.modal {
        overflow: auto !important;
        max-height: 100% !important;
        height: initial !important;
        margin-top: 0;
    }
    body.modal .ui-dialog .ui-dialog-titlebar {
        border-top: 1px solid rgba(0, 0, 0, 0.25);
    }
    </style>
HTML;

    $event->return = str_replace('</head>', $styles . PHP_EOL . '</head>', $event->return);
});

[thetuningspoon]

I didn't see this thread before, but I came up with an alternate solution to this as well: https://processwire.com/talk/topic/11930-module-modalception/