wicket 9 中的 ModalDialog 無法正常工作

Question

我在檢票口 9 中使用模態對話框，因為舊的模態 Window class 已被棄用，我遇到了一些問題。 在 wicket 9 文檔中沒有模態對話框的示例。 我不知道是我用錯了還是有一些錯誤

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，如果它對您有用，您可以分享您的經驗嗎？

Answer 1

您的代碼對我來說看起來不錯！

您可以將其與示例進行比較：

Answer 2

如果將ModalDialog與 Bootstrap 結合使用，Wicket ModalDialog HTML 模板使用的modal-dialog class 與同名的 Bootstrap class 之間可能會發生沖突。 特別是，Bootstrap modal-dialog class 會關閉指針事件，導致在模式對話框中的點擊無效。

要解決此問題，您可以將 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 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