Modal window settings

Currently modal windows works fine but I wonder if there are settings to change some of his aspects:

  • It will close as long we click outside the new pop up panel, but as long we click in the container of the original modal button. Is there any way to close it regardless where we click? For example that would avoid help windows left open unnecessarily because they are in containers and user have active other menus.
  • Is there any way to change the intensity of the dark effect outside the pop up panel?
  • Is possible to make the pop up panel to be bigger than the container that has the original modal button?

Is possible to make the pop up panel to be bigger than the container that has the original modal button?

Currently it's not. Note that only tabs do limit the modal's size, not regular containers, it may be possible to make this behavior optional though.

Is there any way to close it regardless where we click? For example that would avoid help windows left open unnecessarily because they are in containers and user have active other menus.

If the aforementioned option it added then I guess yes, otherwise not sure.

Is there any way to change the intensity of the dark effect outside the pop up panel?

.popup:before is the html element responible for the overlay, you can customize it at will with css.

Is .popup:after a field? I can not find it. Or you mean we need to create a section in the CSS field that makes reference to .popup:after? If so, how?

You can use the widget’s css property to customize the ui’s elements, there’s no exhaustive documentation on the subject besides a few tip, and the css guides on the web. There’s also no particular warranty that everything can be done with it, but it’s a way to hack things to your taste.

For instace, it could like like this:

.popup:before {
  opacity: 0.2;
  background: red; 
}
1 Like

I can not see any difference after adding this

Made a little mistake, edited my post :wink:

1 Like