How can I modify the background color of a dimmer in Semantic-UI framework?

How can I change the color of the dimmer in my modal when I am unable to do so currently?

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="content">
    <p>sth</p>
  </div>
  <div class="actions">
    <div class="ui black button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

In JavaScript:

My attempts to change the dimmer color using the following code have not been successful. What am I missing?

$('.ui.modal').each(function() {
    $(this).modal({allowMultiple: true}).modal('show').css('background-color', 'yellow');
});

Answer №1

To create a transparent effect, utilize the background-color attribute on the .overlay element with an rgba CSS color value.

.overlay { background-color: rgba(100,200,50,0.6); }

If you want to implement this CSS using JavaScript, you can use the jQuery#css function in the following manner:

$(".overlay").css("background-color","rgba(100,200,50,0.6)");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find similarities between two JavaScript arrays using unique identifiers

Seeking a more efficient and streamlined approach in javascript to compare two arrays and generate a third one. We have the following two arrays : var array1 = [ [{ id: 1, enabled: false }], [{ id: 2, enabled: true, }], [{ ...

Tips for utilizing jQuery with Bootstrap 5 popovers

I'm having trouble displaying div content in a popover using jQuery. It was working fine in Bootstrap 3, but now that I've switched to BS-5, it's not working. Here is my code: $('.popper').popover({ placement: 'bottom ...

Searching for answers for Pyramid and AJAX (Jquery) inquiries

If I have a file named somefunction.py in my Pyramid package directory and I want to use $.post to call this function, what URL should I specify to invoke this function? Assuming I have a view function called aview defined in views.py, can I access this ...

What is the best way to pass multiple row values in a form field using AngularJS to a web API?

Is it possible to insert multiple row values in an AngularJS controller using a web api? <tr ng-repeat="rt in xxtt"> <td> <input type="text" class="form-control" ng-model="rt.name" required /> </td> <td> ...

Creating a ROT13 cipher in JavaScript

In my JS function, I need to handle a variable called i. My goal is to encode this variable using ROT13 before proceeding with the function. The challenge lies in decoding the variable and integrating it into the script. I came across a JavaScript implem ...

The package.json file engines field specifying the version with a tilde and then a greater than sign (~>)

When a package.json file includes an engines field such as this: "engines" : { "node" : "~>12" }, What is the significance of ~> in this context? ...

Should CSS properties be applied directly to the html tag?

Surprisingly, I recently discovered that it's possible to set the background-color of the html tag. It seems strange since I always thought the body was responsible for containing the first rendered tag. I used to believe that the html tag was just a ...

Display an image tag using the site_url() function within PHP brackets

I have a loop in my view that is fetching all the data from the database: <?php foreach($content as $contentRow): ?> <?php echo $contentRow->value; ?> <?php endforeach; ?> This loop works well for HTML strings ...

Retrieve the following and previous JSON object

Is there a way to retrieve the next object (with Id 120) and the previous object (with Id 122) when currently at the second object with Id 141? I also have control over the JSON format. var articleId = 141; var url = { "Article": [ { ...

Identifying Internet Explorer version through CSS functionality and feature detection

As of IE10, browser detection tags are no longer supported for identifying a browser. In order to detect IE10, I am utilizing JavaScript and a technique that tests for certain ms prefixed styles like msTouchAction and msWrapFlow. I would like to do the s ...

Show only specific data from JSON results

I am trying to display a specific cryptocurrency's price without the need for curly braces or explicitly stating "USD". Currently, it appears as {"USD":0.4823} when using the following code: <script> $(document).ready(function () { ...

Issue with facebook button in reactJS where onClick() event is not being triggered

I'm facing an issue where my onClick handler is not working with the Facebook button from https://developers.facebook.com/docs/facebook-login/web/login-button/. However, it works fine with a regular div element. Any thoughts on why the onClick event ...

Having trouble accessing HikVision Web SDK functions in Angular 17

First and foremost, this concerns the HikVision cameras specifically. Because the SDK is compiled to plain JavaScript (with jQuery included), I had to import the JS files in angular.json and use declare in the component TS file (in this instance, camera.c ...

Even though there is an error in the line of code saying "Error in render: RangeError: Invalid array length", it still manages to perform its intended task

When trying to round a float number and display stars equal to that rating number, the code works as expected. Surprisingly, it also generates an error Error in render: "RangeError: Invalid array length" <p>Rating: <i v-for='n in Math.round( ...

Can we separate city, state, and country data into individual input fields using Autocomplete and Geonames?

Currently, I have a single INPUT field set up to trigger the jQuery UI Autocomplete function, which pulls data from Geonames API. $( "#city_state_country" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http ...

What is the process for obtaining the URL of the website that is hosting my iframe?

Do you have a technical inquiry? I am curious to know if it is feasible to retrieve the URL of the website that is hosting my iframe. The pages that host my iframe are utilizing the following code: <iframe id="vacancy-iframe" src="http://mypage.co ...

How can I dictate the placement of a nested Material UI select within a popper in the DOM?

Having trouble placing a select menu in a Popper. The issue is that the nested select menu wants to mount the popup as a sibling on the body rather than a child of the popper, causing the clickaway event to fire unexpectedly. Here's the code snippet f ...

How can you make divs adapt to screen resizing in a similar way to images?

In my REACT project, I am faced with the challenge of positioning three divs next to each other, with a small margin between them, and ensuring they are horizontally centered on the screen. As the screen width decreases, I need the right-most div to move ...

Guide on how to import or merge JavaScript files depending on their references

As I work on my MVC 6 app, I am exploring a new approach to replacing the older js/css bundling & minification system. My goal is to generate a single javascript file that can be easily referenced in my HTML. However, this javascript file needs to be speci ...

Can we import a CSS file selectively in Vue.js?

Can specific css-files be applied only when the current route has a "forAdmin" meta in my Vue.js project that includes both an admin-panel and client pages? ...