在 wicket 中自定义 ModalDialog 组件

Question

我在一个页面上有多个 ModalDialogs，每个应该有不同的宽度。每个模态对话框的自定义可以在 .CSS 中进行，其中将被覆盖 class .modal-dialog

我想知道如何在不触摸 .CSS 的情况下为每个模态对话框设置不同的宽度大小。因为每个模态 window 都有 .modal-dialog class 并且我无法更改名称，因为它将使用模态 window.

创建

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

您可以向每个 ModalWindow 添加自定义 CSS class：

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

然后在你的 .css 文件中你可以添加 CSS 规则，例如：

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

或

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

这取决于您需要修改模态的哪个元素window。

在 wicket 中自定义 ModalDialog 组件

Customize ModalDialog component in wicket

java

wicket

modal-dialog