Semamtic UI: Disable dimmer associated with a modal

Question

I have a modal that accepts some user input. If the user gets the right answer, he/she should be able to see the animation behind the dimmer. I have tried

$('.basic.modal')
.modal('setting',{
    closable  : true,
    onDeny    : function(){},
    onApprove : function(){}
})
.modal('hide others')
.modal('show')
.modal('hide dimmer');

and

$('.basic.modal')
.modal('setting',{
    closable  : true,
    onDeny    : function(){},
    onApprove : function(){}
})
.modal('hide others')
.modal('hide dimmer')
.modal('show');

Neither worked. What should I do?

score 8 · Answer 1 · answered May 30 '16 at 17:29

8

You can hide the dimmer by passing the opacity to the dimmerSettings like this:

$('#your-modal').modal({
  dimmerSettings: { opacity: 0 }
}).modal('show');

Answer found here

answered May 30 '16 at 17:29

MarcGuay

747
9
15

The problem with this is that if the page is longer than the window, the dimmer will still remove the scrollbar when the modal appears, causing a small horizontal shift in the window content. – pbarney Jun 23 '20 at 19:32

score 1 · Answer 2 · answered Mar 10 '15 at 14:04

1

You have to set 'hide dimmer' after the modal has shown.

$('.basic.modal')
.modal('setting',{
    closable  : true,
    onDeny    : function(){},
    onApprove : function(){}
})
.modal('hide others')
.modal('show')
.modal('hide dimmer');

answered Mar 10 '15 at 14:04

yinyangero

11
1

Doesn't looks like a valid answer, when I use this solution my modal is being hidden, too. Have you tried it? – Marcin Pevik Sep 18 '17 at 11:11
Perhaps you were using an old version of SUI, but `.modal('hide dimmer')` does work. It's not ideal though because the dimmer flashes on for a moment. – pbarney Jan 27 '21 at 21:10

score 0 · Answer 3 · answered Jan 13 '15 at 04:21

0

This is one way to go about it.

.ui.dimmer{
    background: transparent;
}

How did you end up solving it?

answered Jan 13 '15 at 04:21

Hass

1,628
1
18
31

that seems like a hack. But, to add to the hack, you could also add `pointer-events: none;` – Isaac Oct 02 '16 at 21:00

score 0 · Answer 4 · answered Oct 11 '16 at 09:47

0

You can remove dimmer from onShow callback like that:

$('.modal').modal({
        duration: 10,
        onShow: function () {
            $('.modal').parent().removeClass('dimmer');
        }
    }).modal('show');
    ;

answered Oct 11 '16 at 09:47

Đoàn Hữu Dụng

106
1
7

Semamtic UI: Disable dimmer associated with a modal

4 Answers4