java - 在 wicket 中自定义 ModalDialog 组件
问题描述
我在一页上有多个 ModalDialogs,每个都应该有不同的宽度。每个模态对话框的自定义可以在.CSS中进行,其中将被覆盖类.modal-dialog
我想知道如何在不触及 .CSS 的情况下为每个模式对话框设置不同的宽度大小。因为每个模态窗口都有 .modal-dialog 类,我不能更改名称,因为它将使用模态窗口创建。
有什么办法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;
}
解决方案
您可以为每个 ModalWindow 添加自定义 CSS 类:
modalDialog.add(AttributeAppender.append("class", "custom-1"));
然后在您的 .css 文件中,您可以添加 CSS 规则,例如:
.modal-dialog.custom-1 {
width: 1234px;
}
或者
.modal-dialog.custom-1 .modal-dialog-content {
width: 1234px;
}
这取决于您需要修改模态窗口的哪个元素。
推荐阅读
- c# - 不切实际的烦人“标准表达式中的无效数据类型”
- powershell - 使用powershell删除Sharepoint在线列表项
- reactjs - REACT :将组件传递给将实现组件操作的函数
- xcode - 为osx设置地图以及用户当前位置
- java - 如何以多部分的形式发送响应
- system-verilog - 在系统verilog中循环对象的多维数组元素的标准方法是什么?
- python - 如何单击 Selenium 中的角度下拉菜单
- css - CSS 过渡仅在不活动时
- google-cloud-platform - Google Cloud Function - 依赖回购中代码的函数的默认更新行为是什么?
- javascript - Datepicker 在 IE 和 Chrome 中给出不同的结果