CODEWITHSUNDEEP
meteorsemantic-ui
Oliver Lloyd
Oliver Lloyd

Reputation: 5004

Prevent a Semantic-UI Modal modal from closing via the close icon

I am able to prevent a modal being closed as per the example in the docs by setting closable: false. But if I include a close icon in my html then this is not picked up as a deny action and goes ahead and closes the modal, no matter what.

jsfiddle

I presume that this is because the DOM Settings for a modal look like this:

selector    : {
  close    : '.close, .actions .button',
  approve  : '.actions .positive, .actions .approve, .actions .ok',
  deny     : '.actions .negative, .actions .deny, .actions .cancel'
},

You can see that .close is not in the deny selector.

So how can I have the .close icon fire the onDeny callback? (Note. I tried wrapping .close.icon in an .actions class but this breaks the modal.)

Upvotes: 1

Views: 2538

Answers (1)

challet
challet

Reputation: 972

I think you can change the settings when you initialize the module. I've tried it here http://jsfiddle.net/b1sf6oxu/7/

$('.modal').modal({
    selector: {
        close: '.actions .button',
        deny: '.actions .negative, .actions .deny, .actions .cancel, .close'
    },
    // ...
}

Upvotes: 1

Related Questions