wicket 9 中的 ModalDialog 无法正常工作答案

【问题标题】：ModalDialog in wicket 9 doesnt work properlywicket 9 中的 ModalDialog 无法正常工作
【发布时间】：2020-10-26 07:24:13
【问题描述】：

我在 wicket 9 中使用模态对话框，因为旧的模态窗口类已被弃用，我遇到了一些问题。在 wicket 9 文档中没有模态对话框的示例。不知道是我用错了还是有bug

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("modalWindow");

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

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<head>
</head>
<body>
<wicket:panel>
        <div class="col-md-1 text-right">
            <a wicket:id="showDeleteDialog" class="btn fa fa-trash p24-2x deleteTrashIcon"></a>
        </div>
    <div wicket:id="modalWindow" class="modalDialog"></div>
</wicket:panel>
</body>
</html>

public abstract class ModalPanel extends Panel {
    public ModalPanel(String id, Panel caller) {
        super(id);
        setOutputMarkupId(true);

        add(new AjaxLink<Void>("cancelBtn") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                close(target);
            }
        });
    }

    protected abstract void close(AjaxRequestTarget target);
}

问题是模态对话框打开后，它的行为不像模态对话框。

有人用过 ModalDialog，如果它对你有用，你可以分享你的经验吗？

【问题讨论】：

您是否在对话框中添加了主题？见org.apache.wicket.extensions.ajax.markup.html.modal.theme.DefaultTheme。我会尽快更新文档。
@svenmeier 是的，它丢失了，这是问题之一。感谢更新文档

标签： java wicket

【解决方案1】：

你的代码在我看来没问题！

您可以将其与示例进行比较：

【讨论】：

是否有必要在检票口片段中有模态对话框？或者我可以在wicket:panel 中使用它吗？
Panel 和 Fragment 是可以互换的。片段是内联面板。
模态窗口几乎可以正常工作，但是通过单击按钮以某种方式关闭模态窗口不起作用？会是什么？

【解决方案2】：

如果将 ModalDialog 与 Bootstrap 结合使用，Wicket ModalDialog HTML 模板使用的 modal-dialog 类与同名的 Bootstrap 类之间可能会发生冲突。特别是，Bootstrap modal-dialog 类关闭了指针事件，导致在模态对话框中的点击无效。

要解决此问题，您可以将 Bootstrap modal-content 添加到 Wicket ModalDialog 内容元素：

add(new AjaxLink<Void>("showModalDialog") {
  @Override
  public void onClick(AjaxRequestTarget target) {
    Panel content = new MyContentPanel("content");
    content.add(AttributeModifier.append("class", "modal-content"));
    modalDialog.open(content, target);
  }
});

或者，您可以将modal-content 类添加到用于模态对话框内容的面板的 HTML 模板的根节点。

【讨论】：