Jump to content

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

Recommended Posts

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,


Share this post

Link to post
Share on other sites

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?

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites


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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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?

  • Like 1

Share this post

Link to post
Share on other sites

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


Share this post

Link to post
Share on other sites

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:


  • Like 1

Share this post

Link to post
Share on other sites

This kinda works:

Default theme:


Reno theme:


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


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

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

    $styles = <<< HTML
    .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);

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

  • Like 3

Share this post

Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories. 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Five unique color options Beautifully redesigned login screens Modern typography using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users Compatibility with AdminOnStreoids and other third party modules   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue

      Dark Black

      Vibrant Blue

      Happy Pink

      Smooth Green *new with 0.6.1*

      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
    • By wbmnfktr
      I know from a trusted source that some of you use Laragon as their prefered Windows DEV solution.
      Due to a recent conversation I noticed that there might be a nice little feature some of you may not know about.
      Laragon offers the Quick app option with some tools already predefined. In order to have ProcessWire there as well you just have to add one (two with a comment) line to your Laragon configuration.
      # ProcessWire ProcessWire=composer create-project processwire/processwire %s
      Just in case you want to start your next project a little bit faster.
    • By MarkE
      This post is related to 
      but is a different way of tackling the problem.
      The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:
      'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js' 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js' 'wire/modules/Jquery/JqueryCore/JqueryCore.js' 'wire/modules/Jquery/JqueryUI/JqueryUI.js' Any ideas what else I need, or have I got hold of the wrong end of the stick?
    • By sambadave
      Hi everyone, here's the problem I'm trying to solve.
      I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:
      Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS
      I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.
      This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.
      I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.
      Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:
      Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.
      Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:
      Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.
      I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.
      Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?
      Thank you in advance for anyone who's read this far and has any words of wisdom!
  • Create New...