[英]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.