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: