In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

Is it possible to have a transparent popup window (errorDialog.fxml) on top of the main window (mainWindow.fxml) with 50% opacity while still showing the content of the main window underneath? My attempts at setting the background color of the overlay inside errorDialog.fxml to be transparent only result in a solid 50% gray color that completely hides the main window.

I have tried adjusting the transparency in both the style attribute of "overlay" and in the initialize method of controllerErrorDialog.java without success.

If anyone has any insights or solutions, I would greatly appreciate your help!

controllerMainWindow.java

package myPackage;
import [...];

public class controllerMainWindow extends AbstractController
{

    @FXML
    private Button btnOpenPopup;
    @FXML
    private BorderPane paneMainWindow;
    
    public void initialize()
    {
    }
    
    @FXML
    public void handleButtonAction(ActionEvent event)
    {
        try {
             if (event.getSource().equals(btnOpenPopup)) {
                FXMLLoader errorLoader = new FXMLLoader();
                errorLoader.setLocation(getClass().getResource("errorDialog.fxml"));
                controllerErrorDialog errorController = new controllerErrorDialog();
                errorLoader.setController(errorController);
                Parent layout;
                layout = errorLoader.load();
                Scene errorScene = new Scene(layout);
                Stage errorStage = new Stage();
                errorStage.initStyle(StageStyle.UNDECORATED);
                errorStage.setMaximized(true);
                errorController.setStage(errorStage);
                if(this.main!=null) {
                    errorStage.initOwner(main.getPrimaryStage());
                }
                errorStage.initModality(Modality.APPLICATION_MODAL);
                errorStage.setScene(errorScene);
                errorStage.showAndWait();
            } 
        }catch (IOException exceptionCockpitSettings) {
            System.out.println("Error when switching to cockpitSettings.");
            exceptionCockpitSettings.printStackTrace();
            return;
        } 
    }
}

controllerErrorDialog.java

package myPackage;
import [...];

public class controllerErrorDialog extends AbstractController implements Initializable
{
    @FXML
    private BorderPane overlay;
    private Stage stage = null;

    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        overlay.setStyle("fx-background-color: transparent");
    }
    
    public void setStage(Stage stage) {
        this.stage = stage;
    }
}

errorDialog.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import [...]?>

<BorderPane fx:id="overlay" prefWidth="1920" prefHeight="1080" style="-fx-background-color: rgba(0,0,0,0.5)" xmlns:fx="http://javafx.com/fxml">
   <top></top>
   <left></left>
   <center></center>
   <right></right>
   <bottom></bottom>
</BorderPane>

Answer №1

Ensure the following:

  1. The scene must have a transparent background, utilize
    errorScene.setFill(Color.TRANSPARENT);
  2. The stage should be transparent by using
    errorStage.initStyle(StageStyle.TRANSPARENT);
  3. Any content (excluding the root) that needs to be see-through should possess a fully transparent background

Here is a complete example (although not very user-friendly):

// JavaFX code omitted for brevity
// Please refer to the original post for the full code snippet

Include transparent.css as shown below:

.root {
  -fx-background-color: #ffffff7f;
}

.root HBox, .root .scroll-pane, .root .scroll-pane .viewport {
  -fx-background-color: transparent;
}

https://i.sstatic.net/t9XQs.png

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

The sliding content in the div below the one above it

Currently working on creating my portfolio website, and I have implemented a very dynamic parallax homepage with multiple layers. My goal is to enable one-page scrolling by using vh units. However, I encountered an issue where the div containing the abou ...

I came across a wlwmanifest.xml file while browsing through the source directory of my website

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="../preload/wlwmanifest.xml"> I am curious about the purpose of including this code in my website. If I were to delete this file, how would it impact the f ...

Adding and removing classes in JQuery based on a specific div ID

Is there a way to use addClass() and removeClass() on divs with different class names, identified by their unique ids? Any suggestions on how to make this functionality work? Here is the JavaScript code snippet: $(document).ready(function() { $("#bu ...

The dominance of CSS over other attributes in styling

Imagine having a main body text div and a navigation div for a website. What if you want to make links in the body text green instead of blue, but have the links in the navigation div be red? If you use CSS to make links green, then all links turn green. ...

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

Leveraging ajax for showcasing page content in a floating div container

I am in need of creating a button on my page that, when clicked, will display a floating div above the page and load another internal page. I believe this can be achieved using Ajax, but I have no experience with it and don't know where to start. Her ...

Link-defying button

I'm developing a website with a homepage that serves as an entry point to the rest of the site (it welcomes the user and allows them to click anywhere to access the main website). The following code accomplishes this: <template> <div onc ...

Switch between Accordions/Tabs with JavaScript (ES6)

Encountering a minor issue with the accordion/tab layout provided in this link: https://jsfiddle.net/drj3m5tg/ The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clic ...

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

Steps to insert a new row for a grid item using material-ui

When it comes to breaking a line of grid item like this, the image shown below illustrates how the rest space of the grid should be empty. https://i.stack.imgur.com/pvSwo.png <Grid container spacing={3} <Grid item xs={12}> "Grid Item xs ...

Guide to utilizing the bootstrap grid system to stack below a width of 480px

I have been grappling with this issue, but unfortunately, there seems to be a lack of information on how to resolve it. I have gone through numerous old posts where individuals are "modding" the files and creating their own col-ms (medium-small) that stack ...

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

What is the process for creating two columns with an input box beneath them?

I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image descripti ...

"Exploring the Relationship Between Parent and Child Elements in CSS

Is it possible for an id to act as a parent in CSS? For instance: <div id="link"> <a href="www.example.com"></a> </div> The CSS code: #link > a{ /* style would be applied here*/ } Can this actually be achieved? ...

Attempting to align three sections horizontally

I'm having trouble with my current HTML code and I can't seem to figure out what the issue is. As a beginner in HTML, I am struggling to understand. My goal is to have three columns: one on the left taking up 20% of the space, one in the center t ...

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

Initiate a CSS animation only when a different animation has completed

I am trying to create a sequence of animations using 2 squares. I want the animation for the red square to start only after the blue square's animation is complete. How can I achieve this cycle of animations? .box { width: 100px; height: 1 ...

What could be causing my page to appear at different heights in Safari and Firefox compared to Chrome?

I've been working on www.rootologyhealth.com and I'm stumped by the strange behavior of the Nav Bar on the homepage. It's positioned too high in Safari and Firefox, but appears perfectly in Chrome. Despite my efforts to troubleshoot, I can&a ...

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am fac ...

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...