alertify.js icon indicating copy to clipboard operation
alertify.js copied to clipboard

Published 20 hours ago • verified publisher icon fabien-d

Mouse clicks do not bubble above .alertify-logs

Open DougPuchalski opened this issue 10 years ago • 6 comments

When an alert is shown, .alertify-logs extends across the height of the page. Any mouse clicks that have underlying elements seem to be absorbed by alertify.

DougPuchalski avatar Mar 17 '14 17:03 DougPuchalski

When a dialog is open, it creates an invisible cover that will disable all mouse clicks from happening on the underlying site. This is to "mimic" the behaviour of native dialogs.

Dialogs are used to force the user to take an action before being able to continue. This is intended behaviour.

fabien-d avatar Mar 18 '14 19:03 fabien-d

I'm not referring to the alert window itself, but rather the transparent container which runs the entire vertical height of the window. Clicking on the alert itself closes it, but clicking anywhere below it absorbs the event, rather than passing it to the element below it.

DougPuchalski avatar Mar 18 '14 19:03 DougPuchalski

I think we're talking about the same thing... you're issue is attempting to click a link on the page (behind the dialog)?

If so, that is blocked by design. If that's not what you mean - may need to provide a bit more info

fabien-d avatar Mar 18 '14 19:03 fabien-d

I'm not intending to create a modal dialog to force the user to respond, but rather passive alerts, i.e. "you have been signed in" like a growl notification. I don't want them to prevent the site from being used. Did I miss somehow that the intention is that all log messages are supposed to be modal?

Incidentally, this overlay is only as wide as the alert, but the full height of the screen, so it's not blocking all events, just a portion of the screen.

By the way, thanks for providing this library.

DougPuchalski avatar Mar 18 '14 19:03 DougPuchalski

I misunderstood - log messages should NOT block interaction. If that's what is happening then there could be a bug.

Could you provide a small code sample that recreates the issue? Also, which version/browser this is happening and I'll take a look

fabien-d avatar Mar 18 '14 19:03 fabien-d

Ok, thanks for confirming expected behavior. I'm using Chrome by the way.

I did some more digging, and found that this can be fixed with CSS. Eliminating he bottom declaration resolves the issue and .alertify-logs shrink-wraps the contents.

I've made the change in #209.

Any side effects that you can think of?

DougPuchalski avatar Mar 18 '14 21:03 DougPuchalski