JavaFX Modal Confirm Dialog Box Example

modal-dialog.css

/**
 * modal-dialog.css
 * place in same directory as WebViewConfirm.java
 * ensure your build system copies the file to your build output directory
 */

.root {
  -fx-glass-color: rgba(95, 158, 160, 0.9);
}

.modal-dialog {
  -fx-padding: 20;
  -fx-spacing: 10;
  -fx-alignment: center;
  -fx-font-size: 20;
  -fx-background-color: linear-gradient(to bottom, derive(-fx-glass-color, 20%), -fx-glass-color);
  -fx-border-color: derive(-fx-glass-color, -20%);
  -fx-border-width: 5;
  -fx-background-insets: 12;
  -fx-border-insets: 10;
  -fx-border-radius: 6;
  -fx-background-radius: 6;
}

.modal-dialog:pressed {
  -fx-cursor: move;
}

.modal-dialog .button:pressed {
  -fx-cursor: default;
}

ModalConfirmExample.java

import javafx.application.Application;
import javafx.beans.value.*;
import javafx.concurrent.Worker;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.effect.BoxBlur;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.*;

/**
 * Demonstrates a modal confirm box in JavaFX.
 * Dialog is rendered upon a blurred background.
 * Dialog is translucent.
 */
public class ModalConfirmExample extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(final Stage primaryStage) {
    // initialize the stage
    primaryStage.setTitle("Modal Confirm Example");
    final WebView webView = new WebView(); webView.getEngine().load("http://docs.oracle.com/javafx/");
    primaryStage.setScene(new Scene(webView));
    primaryStage.show();

    // initialize the confirmation dialog
    final Stage dialog = new Stage(StageStyle.TRANSPARENT);
    dialog.initModality(Modality.WINDOW_MODAL);
    dialog.initOwner(primaryStage);
    dialog.setScene(
      new Scene(
        HBoxBuilder.create().styleClass("modal-dialog").children(
          LabelBuilder.create().text("Will you like this page?").build(),
          ButtonBuilder.create().text("Yes").defaultButton(true).onAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent actionEvent) {
              // take action and close the dialog.
              System.out.println("Liked: " + webView.getEngine().getTitle());
              primaryStage.getScene().getRoot().setEffect(null);
              dialog.close();
            }
          }).build(),
          ButtonBuilder.create().text("No").cancelButton(true).onAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent actionEvent) {
              // abort action and close the dialog.
              System.out.println("Disliked: " + webView.getEngine().getTitle());
              primaryStage.getScene().getRoot().setEffect(null);
              dialog.close();
            }
          }).build()
        ).build()
        , Color.TRANSPARENT
      )
    );
    dialog.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());

    // allow the dialog to be dragged around.
    final Node root = dialog.getScene().getRoot();
    final Delta dragDelta = new Delta();
    root.setOnMousePressed(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        // record a delta distance for the drag and drop operation.
        dragDelta.x = dialog.getX() - mouseEvent.getScreenX();
        dragDelta.y = dialog.getY() - mouseEvent.getScreenY();
      }
    });
    root.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        dialog.setX(mouseEvent.getScreenX() + dragDelta.x);
        dialog.setY(mouseEvent.getScreenY() + dragDelta.y);
      }
    });

    // show the confirmation dialog each time a new page is loaded.
    webView.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
      @Override public void changed(ObservableValue<? extends Worker.State> observableValue, Worker.State state, Worker.State newState) {
        if (newState.equals(Worker.State.SUCCEEDED)) {
          primaryStage.getScene().getRoot().setEffect(new BoxBlur());
          dialog.show();
        }
      }
    });
  }

  // records relative x and y co-ordinates.
  class Delta { double x, y; }
}

https://forums.oracle.com/forums/thread.jspa?threadID=2378939 "Modal Dialog Help - Application should get lightly blurred and transparent"

https://forums.oracle.com/forums/thread.jspa?threadID=2350380 "Confirm Box Without Close Option "

added drop shadow effect to dialog

added drop shadow effect stopped translucency working, updated code to allow the translucency to work.

gave the modal dialog a rounded border.

http://www.coderanch.com/t/580345/Java-FX/java/Rounded-corners-Modal-Dialogs "Rounded corners on Modal Dialogs"

Extracted css styling to a separate file.

Hi, your app is great. But I have one question, how to use the modal dialog within webEngine.confirmHandler and return the user's choice, say, get the choice before handler returns? I don't know how to implement because It's asynchronous.

Thanks,
Grant

Hi GrantZhu, I created a new gist to demonstrate creating dialogs compatible with webEngine.confirmHandler: https://gist.github.com/2992072

Cleaned up code and css a little bit to just render the the translucent background effect in the dialog background rather than a stacked pane.
Also made the content opaque rather than translucent, so now only the background remains translucent.

Made the modal dialog window modal with the primaryStage as the owner - providing an owner stops two icons showing up in the taskbar for the app on Windows 7.

Add functionality to allow the dialog to be dragged around.

JavaFX WebView Modal Confirm Dialog Box Example was created to address GrantZhu's comment and makes use of the stage.showAndWait routine to make the operation of the dialog seem synchronous to the calling code.

Your numerous contributions are greatly appreciated. Just wanted to say a word of thanks! I'm constantly finding my questions answered by somewhere that you've posted an example, an answer, a gist, etc. Thanks mate!

Thanks a lot jewelsea. the best on oracle,

This code is now quite old and uses deprecated API features. Before using this code, I recommend reading the answer to the StackOverflow question Block program execution until user clicks button and considering adopting one of the solutions recommended in that answer.

Standard Dialog classes added will be added to JavaFX as part of Java 8u40. See the fxexperience post on bringing dialogs to JavaFX.