Semantic-ui: When preventing close of modal, clicking the dimmer closes the dimmer but not the modal

Created on 2 Feb 2016 · 6Comments · Source: Semantic-Org/Semantic-UI

When preventing close of modal by returning false from modal's onHide:

With detachable: false: clicking the dimmer closes the dimmer but not the modal. I believe both should remain open.
With detachable: true: clicking the dimmer closes the dimmer and the modal. I believe both should remain open.

I know that I could disable allowing the dimmer to close the modal but I would prefer that you can use the dimmer to close the modal unless some action is in progress.

(Also, modal's onHide isn't specifically documented as allowing the return of false to prevent closing, but clicking the dimmer doesn't seem to fire modal's onDeny)

Thanks

stale

Source

woodlandhunter

👍4

Most helpful comment

I was also finding way to prevent modal from closing. I read about closable property and i think this suits your need.

 $('.first.modal')
    .modal({
        closable: false
     }).modal('show');

darkmakukudo on 3 Feb 2016

👍11 ❤1

All 6 comments

I was also finding way to prevent modal from closing. I read about closable property and i think this suits your need.

 $('.first.modal')
    .modal({
        closable: false
     }).modal('show');

darkmakukudo on 3 Feb 2016

👍11 ❤1

@cariquitanmac I mention in my original post that I can prevent the dimmer from closing the dialog entirely but that does not exactly suit my needs. I want the dimmer to be able to close the dialog except as determined by some logic.

Example: A modal with dimmer has a sumbit button and a cancel button. When submit is pressed the submit button is disabled/shows a loader and the cancel button is disabled. The user should not be able close the dialog through any means until the submit has either failed or succeeded (on success it auto-closes, fail shows an error in the dialog and dialog becomes closable again).

woodlandhunter on 3 Feb 2016

👍4

@woodlandhunter i fully understand your issue now.

This is not the right way but i think you can set the dimmer visible again in your onhide event like this :+1:

onHide: function () {
            $('body').dimmer('show');
            return false;
        }

Only downside is the glitch on display.

darkmakukudo on 4 Feb 2016

👎1

The following link leads to an issue about onHide callback. Added functionality is explicitly declared but still is not documented:
https://github.com/Semantic-Org/Semantic-UI/pull/2769

I'd like to support this request since I strongly require that feature for closable modals.
https://jsfiddle.net/vkhL8p54/5/

asmforce on 12 Mar 2016

👍4

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.