Customize ModalDialog component in wicket

Question

I have multiple ModalDialogs on one page and each of them should have different width. The customization of each modal dialog can be made in .CSS where will be overwritten class .modal-dialog

I would like to know how I can set for each modal dialog different width size without touching .CSS. Because every modal window has .modal-dialog class and I cant change the name because it will be created with modal window.

Is there any way to do with AttributeModifier ?

public class MainPanel extends Panel {

    private final ModalDialog modalDialog;

    public MainPanel(String id, IModel<String> headingIdx, IModel<String> collapseIdx) {
        super(id);
        setOutputMarkupId(true);
        modalDialog = new ModalDialog("modalDialog");
        modalDialog.add(new DefaultTheme());
        modalDialog.trapFocus();
        modalDialog.closeOnEscape();
        add(modalDialog);

        add(new AjaxLink<Void>("showModalDialog") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                modalDialog.setContent(new ModalPanel("content", MainPanel.this){
                    @Override
                    protected void close(AjaxRequestTarget target) {
                        modalDialog.close(target);
                    }
                });
                modalDialog.open(target);
            }
        });
        add(modalDialog);
    }
}        

.modal-header {
    font-weight: bold;
    border: none;
}

.modal-dialog {
    border-radius: 5px;
    pointer-events: all;
}

.modal-dialog .modal-dialog-content {
    /* flex children */
    display: flex;
    flex-direction: column;
}

.modal-dialog-overlay.current-focus-trap .modal-dialog-content {
    /* resize the dialog with current focus only, otherwise the resize handle shows through on Firefox */
    resize: both;
}

.modal-dialog .modal-dialog-form {
    /* size */
    margin: 0;
    padding: 0;
    overflow: hidden;

    /* flex in parent */
    flex: 1;

    /* flex children */
    display: flex;
    flex-direction: column;
}

.modal-dialog .modal-dialog-header {
    border-radius: 5px 5px 0px 0px;
    background: #ffb158;
    margin: 0;
    padding-top: 4px;
    text-align: center;
}

.modal-dialog .modal-dialog-body {
    /* size */
    flex: 1;
    overflow-y: auto;

    padding: 20px;
}

.modal-dialog .modal-dialog-footer {
    padding: 5px;
}

Answer 1

You can add a custom CSS class to each ModalWindow:

modalDialog.add(AttributeAppender.append("class", "custom-1"));

Then in your .css file you can add CSS rules, for example:

.modal-dialog.custom-1 {
   width: 1234px;
}

or

.modal-dialog.custom-1 .modal-dialog-content {
   width: 1234px;
}

It depends which element of the modal window you need to modify.