wicket 9 中的 ModalDialog 无法正常工作

Question

I'm using Modal Dialog in wicket 9 because the old Modal Window class got deprecated and I'm having some issues with it.我在检票口 9 中使用模态对话框，因为旧的模态 Window class 已被弃用，我遇到了一些问题。 In wicket 9 documentation there is no example with ModalDialog.在 wicket 9 文档中没有模态对话框的示例。 I dont know if I'm using it wrong or it has some bugs我不知道是我用错了还是有一些错误

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

The problem is that after modal dialog was opened, it doesnt behave like modal dialog.问题是打开模态对话框后，它的行为不像模态对话框。

Did someone use ModalDialog, may be you can share your experience if it does work for you?有人使用 ModalDialog，如果它对您有用，您可以分享您的经验吗？

Answer 1

Your code looks OK to me!您的代码对我来说看起来不错！

You can compare it against the example:您可以将其与示例进行比较：

Answer 2

If you combine the ModalDialog with Bootstrap, you may have a clash between the modal-dialog class used by the Wicket ModalDialog HTML template and the Bootstrap class of the same name.如果将ModalDialog与 Bootstrap 结合使用，Wicket ModalDialog HTML 模板使用的modal-dialog class 与同名的 Bootstrap class 之间可能会发生冲突。 In particular, the Bootstrap modal-dialog class turns off pointer events causing clicks in the modal dialog to have no effect.特别是，Bootstrap modal-dialog class 会关闭指针事件，导致在模式对话框中的点击无效。

To fix this, you can add the Bootstrap modal-content to the Wicket ModalDialog content element:要解决此问题，您可以将 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);
  }
});

Alternatively, you can add the modal-content class to root node of the HTML template of the Panel you use for the modal dialog's content.或者，您可以将modal-content class 添加到用于模态对话框内容的面板的 HTML 模板的根节点。

wicket 9 中的 ModalDialog 无法正常工作

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-07-06 08:49:07

解决方案2
2 2021-06-01 20:00:24

wicket 9 中的 ModalDialog 无法正常工作

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-07-06 08:49:07

解决方案2 2 2021-06-01 20:00:24

解决方案1
3 已采纳 2020-07-06 08:49:07

解决方案2
2 2021-06-01 20:00:24