Can't override the modal opacity with jQuery UI

Question

I firstly tried to change the opacity on my dialog function like that :

open: function(event, ui) {
  $('.ui-widget-overlay').css({ opacity: '.5' });
},

But it didn't work, I tried to override the opacity again by trying to modify the css function like this:

$(".ui-widget-overlay").css("cssText", "height: 0 !important;");

https://stackoverflow.com/a/25818398/10347292

But it didn't work aswell, here is the opacity of the acutal modal (i want to change it to 0.5) :

Here is my final code :

html code :

<div>
    <img id="elem" src="https://i.stack.imgur.com/flekn.png" alt="Orange">
</div>

JS code (jquery method) :

function enlargeImage() {
    $('#elem').click(function () {
        $('#elem').dialog({
            title: "Image",
            modal: true,
            width:'auto',
            open: function(event, ui) {
                $(".ui-widget-overlay").css("cssText", "height: 0 !important;");
            },
            close:function() {
                  $(this).dialog('destroy').remove();
            }
        });
    });
}

$(document).ready(function(){
    enlargeImage();
});

Furthermore, i'm working on a big project, so i can't modify the CSS page opacity because it will touch all the others dialog using this opacity, i can only modify this properties with jQuery...

IIRC [tag:jquery-ui-dialog] by default will fade-in/-out. And given that it's jquery-ui it will likely do this by animating the opacity style property (rather than css transition). So setting the value will be overwritten when the dialog is shown/hidden. You'll need to turn off that transition using the [show](https://api.jqueryui.com/dialog/#option-show) option. — freedomn-m, Apr 04 '22 at 14:23
Did you read the link? This is in no way 'reproducible'. PLease add a snippet — 0stone0, Apr 04 '22 at 14:24
A "reproducible" example will allow us to run it and see what happens - it will need all the relevant script/link includes and html - not just the js. See [tag:jquery-ui] for a "starter kit". — freedomn-m, Apr 04 '22 at 14:26
Why not CSS applied to the Theming? `body.ui-widget-overlay { opacity: 0.5; }` *Additionally, when the `modal` option is set, an element with a `ui-widget-overlay` class name is appended to the ``.* — Twisty, Apr 04 '22 at 14:48
Just re-looking and it looks like you're only after the *background* "overlay" - not the dialog itself. So you can add it to the css: `body .ui-widget-overlay { opacity:0.1; }` (as above, with/without body depending on where you put it, but with a space) — freedomn-m, Apr 04 '22 at 14:49
@Twisty will need a space `body .ui...` as/if it's appended (assuming a typo) — freedomn-m, Apr 04 '22 at 14:53
As far as I can tell from the description of the [modal option](https://api.jqueryui.com/dialog/#option-modal) - there's no code option to change it (the modal background overlay) and on my test its default is already 0.5. So it's a little unclear *why yours is 0.003*. Perhaps you already have some other customisation css installed? — freedomn-m, Apr 04 '22 at 14:58
Thanks again everyone for your help, i changed my code to be a real reproducible example. — Zahreddine Laidi, Apr 04 '22 at 15:01
Furthermore, i'm working on a big project, so i can't modify the CSS opacity because it will touch all the others dialog using this `opacity`... — Zahreddine Laidi, Apr 04 '22 at 15:03
And yes some other customisation css are already installed i think, this is a huge project... and i only can change it with jQuery (can't modify the CSS because it will make effect on all others dialog..) @freedomn-m — Zahreddine Laidi, Apr 04 '22 at 15:08
Well... you might be able to change it just on your page css `.body.dark-modal-background .ui-widget-overlay` and add class `dark-modal-background` to your *body* on that page. If you have other dialogs on the page they will be affected, so may not be an option, but so will a jquery solution using `$(".ui-widget-overlay")` (edit: no, it won't the background is only added then the dialog is shown, then deleted - so as long as there's only one dialog open, it's ok). — freedomn-m, Apr 04 '22 at 15:11
But there is no way to do it only with jQuery ? Like not touching the css page or the html page, only with the jQuery script ? @freedomn-m — Zahreddine Laidi, Apr 04 '22 at 15:16
Your code [works fine](https://jsfiddle.net/80cgxboy/1/) - just that you're (again) changing the wrong property - `$(".ui-widget-overlay").css("opacity", "0.5");` — freedomn-m, Apr 04 '22 at 15:17
Like i showed you **firstly**, this code doesn't work (this is why my opacity is at 0.003, because this is modified elsewhere), so i absolutely need to **OVERRIDE** *my new modal opacity* of 0.5, but i didnt found a way to do it in the **jQuery script**... @freedomn-m — Zahreddine Laidi, Apr 04 '22 at 15:23
Did you try the fiddle? https://jsfiddle.net/80cgxboy/1/ I've added an override to the css (0.1) and two dialogs on the same page, one uses the override and one uses jquery to override that override. — freedomn-m, Apr 04 '22 at 15:27
This is what the "complete" part of [mcve] is - "*Provide all parts someone else needs to reproduce your problem*" ... all parts ... including any additional css. As it is, the code you've provided does not *demonstrate* the problem as it's using the default overlay of 0.5 and there's no *demonstrated* method of it being set to 0.003, so we can't help you fix that as we don't know how it's been done. Only by dragging it through the comments have we found that you have some other code setting it to 0.003 and *maybe* that's via some css. See also: https://idownvotedbecau.se/itsnotworking/ — freedomn-m, Apr 04 '22 at 15:31
Sorry for the "uncomplete" exemple but there is so many css file on that page so this is why it's pretty hard for me to reproduce the exact same problem... your jsfiddle is actually working, but it doesn't work with my code, i think that there is a lot of overriding on the opacity modal and that is maybe why this not working, maybe with a setTimeout() can it work ? (and can you delete your unvote please, it affect the new people who can maybe help us on that...) @freedomn-m — Zahreddine Laidi, Apr 04 '22 at 15:38
Add `!important` will override any/all styles that *do not have* !important, unfortunately, you [can't add !important via .css()](https://stackoverflow.com/questions/2655925/how-to-apply-important-using-css). Try adding a class: https://jsfiddle.net/80cgxboy/3/ — freedomn-m, Apr 04 '22 at 15:52

Twisty · Answer 1 · 2022-04-04T15:37:12.983

Consider the following.

$(function() {
  $('#dialog').dialog({
    title: "Image",
    modal: true,
    width: 'auto',
    close: function() {
      $(this).dialog('destroy').remove();
    }
  });
});

body > div.ui-widget-overlay {
  opacity: 0.5;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="dialog" title="Image">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>

When you inspect the overlay, the opacity is set as expected.

From the Theming section:

Additionally, when the modal option is set, an element with a ui-widget-overlay class name is appended to the <body>.

Update

Your OP did not clarify you had multiple dialogs and you wanted to modify the overlay for just this one. There is no good way to focus on that element. What might be best is upon Open, to add a Class to the element and remove the Class during Close. Or, if you can't use CSS, assign it to the proper selector.

$(function() {
  $('#dialog').dialog({
    title: "Image",
    modal: true,
    width: 'auto',
    open: function() {
      $("body div.ui-widget-overlay").css("opacity", 0.5);
    },
    close: function() {
      $("body div.ui-widget-overlay").css("opacity", 0.3);
      $(this).dialog('destroy').remove();
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="dialog" title="Image">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>

In this way, when you open one specific dialog, the Overlay has a different opacity. The others will not be effected.

I can't modify the CSS opacity because it will touch all the others dialog using this opacity... i only can change this opacity with jQuery, but i didn't find a way to override this actual modified modal opacity... — Zahreddine Laidi, Apr 04 '22 at 15:10
The dark way and this new one aswell is still not working, don't know what to do... @Twisty — Zahreddine Laidi, Apr 04 '22 at 15:45
@ZahreddineLaidi not sure what to say, something else must be interfering. No way to know without a proper example: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, Apr 04 '22 at 16:17

Can't override the modal opacity with jQuery UI

1 Answers1