ModalDialog in wicket 9 doesnt work properly
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. In wicket 9 documentation there is no example with ModalDialog. 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?
2 answers
solution1
3 ACCPTED 2020-07-06 08:49:07
Your code looks OK to me!
You can compare it against the example:
solution2
2 2021-06-01 20:00:24
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. In particular, the Bootstrap modal-dialog class turns off pointer events causing clicks in the modal dialog to have no effect.
To fix this, you can add the Bootstrap modal-content to the Wicket ModalDialog content element:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.