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;
}

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

Tips for aligning text in MUI Breadcrumbs

I am currently utilizing MUI Breadcrumb within my code and I am seeking a solution to center the content within the Breadcrumb. Below is the code snippet that I have attempted: https://i.stack.imgur.com/7zb1H.png <BreadcrumbStyle style={{marginTop:30}} ...

Trying to display logo using 'content' property in CSS

I've been trying to display a logo on the header of my website, but I'm having trouble getting it to show up. I attempted to set the logo using HTML syntax as well as the following CSS code: .div { content: url (...jpg); } However, both metho ...

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement) import Butto ...

Switch Between Different Background Colors for Table Rows With Each Click

This script changes colors when a row in a specific column is clicked: $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $(this.parentNode).toggleClass("enroute"); }); }); CSS: .placed{ b ...

Enhance the numerical value displayed in jQuery UI tooltips

I have folders with tooltips displaying text like '0 entries' or '5 entries' and so on. I am looking for a way to dynamically update this tooltip number every time an item is added to the folder. The initial count may not always start a ...

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

Achieving vertical center alignment for the label and btn-group in Bootstrap

Is it possible to align other elements with the Bootstrap btn-group? <div class="btn-toolbar text-center"> <div class="pull-left"> <span class="glyphicon glyphicon-envelope " style="font-size:1.5em;"></span> < ...

Achieve seamless transitions between animations when hovering with CSS3

I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...

Utilize JavaScript to append a CSS class to a dynamic unordered list item anchor element

I am working with a list of ul li in a div where I need to dynamically add CSS classes based on the click event of an anchor tag. Below is the HTML structure of the ul li elements: <div class="tabs1"> <ul> <li class="active"> ...

Why isn't the background color displaying for the child text element during animation?

My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the <input type="text"> elements in column 1, the text elements within the <span> tag with class names placeholder2, ...

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

I need a way to switch the icons fa fa-plus with fa fa-minus individually while using collapse in my code, without having all of the icons toggle at once within a foreach loop. Check out a demonstration of my code below: <link rel="stylesheet" href= ...

Determining the height of a jQuery mobile page

Struggling for the last 24 hours to adjust the min-height styling on a jQuery mobile page specifically for mobile safari. Despite trying various methods like inline styles and overriding ui-page styles, I have not been successful in changing the height of ...

Is there a way to align the text input and text area next to each other?

I need help with styling a contact form that consists of 4 text input fields and 1 text area. Here is the current code for the contact form: <form class="contact_form"> <input type="text" placeholder="Name"> <input type="text" plac ...

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

If I make a div that is 30% wide, and another div that is 70% wide, they do not align horizontally. To fix this, I need to ensure that the combined widths of the two divs are less than 100%. Here's an example of how it can be done: <div id="wrapp ...

Retrieving information from a dynamically generated HTML table using PHP

I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...

Aligning the text in the middle of a button

Currently delving into Front-End development and in the process of coding my maiden site using bootstrap. Encountered a roadblock on something seemingly simple. How can I center text within a button? Here's the button, the default one utilizing an " ...

Achieve sliding animations with Pure CSS using slideUp and slideDown techniques

Currently, I have implemented a code snippet to showcase a menu along with displaying submenus upon hovering over the main menus. Now, I am looking to introduce some animation effects for the submenus when they appear, similar to the slideUp and slideDown ...

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

I've been working on creating a CSS template and everything seems to be functioning correctly, except for the grid gap which doesn't seem to work properly on my iPhone. Here's the code I have so far: <div class="grid"> <h1 ...