Question

我想在打开Wicket-Bootstrap Modal时修改HTML正文标记。我想要实现的目标是<body class="modal-open">，而不是<body>

使用Wicket 8 M8，我有这段代码：

owsImportDialog = new MyModalBootstrapDialog("owsImportDialog"
        , new CompoundPropertyModel<>(new BopOwsTO()))      {

    @Override
    void importOws(AjaxRequestTarget target, IModel<BopOwsTO> owsModel) {
        appendCloseDialogJavaScript(target);
        BopOwsTO owsTo = owsModel.getObject();
        try {
            importOwsCapabilities(owsTo);
            owsViewDialog.header(Model.of("OWS anzeigen"))
                    .setModel(Model.of(owsTo.getServiceId()));
            owsViewDialog.appendShowDialogJavaScript(target);
        }
        catch (OwsCapsImportException e) {
            String localizedMessage = e.getLocalizedMessage();
            importAlert.setModelObject(localizedMessage);
            importAlert.appendShowDialogJavaScript(target);
            error(localizedMessage);
        }
        finally {
            target.appendJavaScript("document.getElementsByTagName('body')[0]" +
                  ".setAttribute('class', 'modal-open');");
            // target.appendJavaScript("document.body.setAttribute('class', 'modal-open');");
            // target.prependJavaScript("document.body.setAttribute('class', 'modal-open');");

            // target.appendJavaScript("alert('Hallo');");

            // owsViewDialog is a child of owsView WebMarkupContainer
            target.add(owsView, feedback);
        }
    }

    @Override
    void saveOws(AjaxRequestTarget target, IModel<BopOwsTO> owsModel)
    { }
    @Override
    void cancel(AjaxRequestTarget target)
    { }
};

如果行target.appendJavaScript("alert('Hallo');");处于活动状态，我实际上会看到警告窗口。

我也在页面类中尝试了这段代码：

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);
    PackageResourceReference resourceReference = new PackageResourceReference(
            getClass(), "../css/BuiOwsPage.css");
    CssReferenceHeaderItem cssRef = CssReferenceHeaderItem.forReference(resourceReference);
    response.render(cssRef);
    response.render(OnLoadHeaderItem
            .forScript("document.body.setAttribute('class', 'modal-open');"));
}

但我的尝试都没有成功。

更新
@ martin-g的答案并没有解决问题我很确定问题是由这些陈述的顺序引起的：

{
    appendCloseDialogJavaScript(target);
    ...
    try {
        owsViewDialog.appendShowDialogJavaScript(target);
        ....
    }
    catch { ... }
    finally {
        target.add(owsView, feedback);
    }
}

由this关闭appendCloseDialogJavaScript()模态时，类modal-open将从class的{{1}}属性中删除。然后<body>会打开，但owsViewDialog 不会插入modal-open，无论我是否附加了代码段class。缺少jQuery(document.body).addClass('modal-open')表示无法滚动页面。

Answer 1

由于使用了Wicket和Bootstrap，因此jQuery也可用。我建议你使用jQuery(document.body).addClass('modal-open')。

jQuery必须同时具有addClass（）和attr（）！

Wicket，修改HTML元素

1 个答案: