1

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?

4 Answers 4

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

1
  • 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, 2020 at 19:32
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');
2
  • Doesn't looks like a valid answer, when I use this solution my modal is being hidden, too. Have you tried it? Sep 18, 2017 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, 2021 at 21:10
0

This is one way to go about it.

.ui.dimmer{
    background: transparent;
}

How did you end up solving it?

1
  • that seems like a hack. But, to add to the hack, you could also add pointer-events: none;
    – Isaac
    Oct 2, 2016 at 21:00
0

You can remove dimmer from onShow callback like that:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.