Modals

"Close on Outside Click" -> "cursor: pointer;" (mouse-) style for the overlay

Dirk67

just a small style question (not very important):

I am using the classic theme for modals in J4,
and I try to get the "cursor: pointer;" (mouse-) style,
when mouse-hovering outside the modals over the dark overlay
(to indicate the activated "Close on Outside Click" function to the user)

like it was in J3 ...

I tried:

[data-modals-element="modal"][data-modals-theme="classic"] [data-modals-element="overlay"] {
	--opacity: 0.7;
	cursor: pointer;
}

in my user.css

the opacity setting is correctly applied,
but the cursor: pointer; -style shows no effect.

__________________________
modals v12.3.6-dev2676083 pro

Dirk67

10 months 3 days ago

Dirk67

10 months 3 days ago

I found a 2 step approach , that works

[data-modals-element="modal"][data-modals-theme="classic"] [data-modals-element="container"] {
	cursor: pointer;
}
[data-modals-element="modal"][data-modals-theme="classic"] [data-modals-element="main"] {
	cursor: default;
}

but that seems very strange / awkward to me,
shouldn't there be better ways ?

Peter van Westen ADMIN

10 months 3 days ago

Peter van Westen ADMIN

10 months 3 days ago

There are a lot of other elements that are on top of the overlay that you might not see.
Like the container and the pagination-bar. So yes, what you did is the way to go, with the Classic theme.

Please post a rating at the Joomla! Extensions Directory

You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription

Modals

"Close on Outside Click" -> "cursor: pointer;" (mouse-) style for the overlay

M Modals