Hello! would it be possible to have a modal open a nother modal and let that modal be bigger then it self?

I have a modal with a form and on that form a client can be selected. By pressing select client a new modal is opened with a list of clients. This modal needs to be a bit bigger then the modal with the form because it shows more info. I guess with CSS this should be possible but I could not get this working.

I'm not sure this is a good use case for a Modal. Typically, a Modal is used for a use case where the user needs to complete a task using the Modal before doing anything else. Multiple modals have the potential to be confusing for the user. Rather than trying to make a double Modal work, I'd re-think the interaction pattern you're using.

Perhaps a screen with AJAX-enabled elements would serve the same purpose?

Hi Freek,

Put your modals in same level. The ClientListModal doesn't have to be in the FormModal

E.g.:

Regards

Thanks for your response!

The modal has a web block that includes a second web block that contains a modal. In your example your passing the modal ID of the clientlistmodal to the form modal right and then do a toggle on the click of the link? Would it be possible if the second modal is inside the first?

Can you tried put the second webblock outside of first webblock ? and when you click on a client, return to your screen the clicked clientId using NotifyWidget (O10) or Event (O11). After this, in notify action, refresh your data and toggle modal.


See the attachment with the implementation of above comment

Hello Freek, 

I'll second Andrew comment. It is usually bad UI/UX to have a modal open another modal. His suggestion of using the page itself for enter the data or navigating to a new page would create a better experience. 

Said that, yes, it is possible to do what you want. 

You need to remember how Web blocks work. 

The only way to send information to a Web block, from its parent, is using input parameters. 

So, to open a second modal inside the first, you need to Ajax refresh the second Web block passing a value through an input parameter that tells to open the modal. Verify it in the preparation of the modal and use ToggeModal to open it from the preparation.

As to the modal to not be opened 'inside' the first, I think this is already the default behaviour as I think they will be fixed relative to the screen, independently of where the widget is positioned in the screen. 

If I am wrong about it (I don't think so, but...), you can put the second modal inside a div that is positioned using fixed. This would have the desired effect. 

Cheers. 

Hi, freek, 

This is interesting. The mask is fixed, for sure. But maybe the modal itself not. 

Could you inspect the HTML in the browser to see how the most external div of the modal itself is being positioned? 

Cheers 

Both modals are sharing the css:

Hi Freek,

The CSS is not the reason for the second modal to be "smaller" as the modals are fixed. Maybe the size is being calculated by JavaScript.

Could you provide a simple module reproducing the problem so I can take a look?

Cheers

See example.

Hi Freek,

CSS of modal is much more complex than I initially expected.

Don't know if it is possible to change it to allow a MODAL to open independently when you have a modal inside a modal.

Probably the easier (and faster) workaround is really to change your design to avoid the modal inside a modal.

I'll try to see if I can change it in a way that this is not necessary, but don't know if I'll be successful.

Cheers.

Hi Freek,


Try to put ExtendedClass of the second modal a class "custom-modal" and add to your style:

.modal.custom-modal {

width: you-new-size;

}

Only the second modal will be affected by this new class you defined here and it should be on top of the original style of the modal.


Regards

Fabio

Hi Fabio,


When we do this the first modal gets a scroll bar:

Hi @Fantato

The problem seems to be that the modal uses some weird CSS that makes it's content area limit even the position fixed (what is cool and annoying at the same time). 

So, the problem is more complex... 

Cheers

What about a PopUp styled as a modal? It would visually have the same effect and you would avoid a lot of bad practices...

freek wrote:

Hi Fabio,


When we do this the first modal gets a scroll bar:

Hello freek!

You should just implement Pedro Costa's solution, it was the second answer to your question, it was answered 5 days ago, and it solves your problem. There's no need for this thread to continue.

One of his answers has an .oml file on how to do it.

Remember to mark the answer which works as correct.


Hi Henrique,

While I also agree that for now, Pedro's solution is probably the easiest way to solve the problem, I also understand that this is an interesting topic, as modal is somehow limiting its content of overflowing, even if it is fixed positioned.

On the other hand, I would suggest a different approach either, that would be to make visible the content that should be opened in the second modal, in the web block itself, using a mask as well. So, just a container to make the mask, and a container to include the content. opening the search feature in the place.

Or to open the content of the first modal "inline" in the page, or using the same approach of a div and a div, and than using the second modal as the only modal.

Better than open a modal inside another, anyway.

So, we can keep going with other alternatives for the problem proposed by Freek, as I am pretty sure we will find other possibilities.

Not always is a matter of close a topic. Many times, a question can generate many different solutions.

I find this useful.

Cheers. 

Hi Freek,

If you don't need to scroll the modal, you can try override modal-wrapper class.

Put in your module the css looks like this:

.modal-wrapper {
    max-height: none;
    overflow: visible;
    align-self: center;
}

Hi Pedro, thank you for your response and sorry for my late reply. I tried that part of CSS but that is not working as expected. The second modal is bigger then the first one but because of the list that is in it, it compleetly fills the height of the screen. Also it's not alligned in the middele of the screen see screenshot:

Hi Freak,

You can change your css for this:

.modal-wrapper {
    max-height: none;
    overflow: visible;
    align-self: center;
}

.internal-modal .modal-content {
    overflow-y: auto;
    max-height: 400px;
}

Change max-height size as you prefer

And now, add the internal-modal class to the container with the client modal.

 

If you think this solution solved your problem, like it and mark this post as solution


Regards,

Pedro Costa