[英]Customize ModalDialog component in wicket
我在一页上有多个 ModalDialogs,每个都应该有不同的宽度。 每个模态对话框的自定义可以在.CSS中进行,其中将被覆盖 class .modal-dialog
我想知道如何在不触摸的情况下为每个模态对话框设置不同的宽度大小。CSS。 因为每个模态 window 都有.modal-dialog class 并且我不能更改名称,因为它将使用模态 window 创建。
有什么办法可以处理AttributeModifier
吗?
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("modalDialog");
modalDialog.add(new DefaultTheme());
modalDialog.trapFocus();
modalDialog.closeOnEscape();
add(modalDialog);
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);
}
}
.modal-header {
font-weight: bold;
border: none;
}
.modal-dialog {
border-radius: 5px;
pointer-events: all;
}
.modal-dialog .modal-dialog-content {
/* flex children */
display: flex;
flex-direction: column;
}
.modal-dialog-overlay.current-focus-trap .modal-dialog-content {
/* resize the dialog with current focus only, otherwise the resize handle shows through on Firefox */
resize: both;
}
.modal-dialog .modal-dialog-form {
/* size */
margin: 0;
padding: 0;
overflow: hidden;
/* flex in parent */
flex: 1;
/* flex children */
display: flex;
flex-direction: column;
}
.modal-dialog .modal-dialog-header {
border-radius: 5px 5px 0px 0px;
background: #ffb158;
margin: 0;
padding-top: 4px;
text-align: center;
}
.modal-dialog .modal-dialog-body {
/* size */
flex: 1;
overflow-y: auto;
padding: 20px;
}
.modal-dialog .modal-dialog-footer {
padding: 5px;
}
您可以将自定义 CSS class 添加到每个 ModalWindow:
modalDialog.add(AttributeAppender.append("class", "custom-1"));
然后在您的.css 文件中您可以添加 CSS 规则,例如:
.modal-dialog.custom-1 {
width: 1234px;
}
或者
.modal-dialog.custom-1 .modal-dialog-content {
width: 1234px;
}
这取决于您需要修改模态 window 的哪个元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.