Css 更改已显示的wicket ModalWindow的样式

我想在一个按钮中的点击事件后使模态窗口透明（不透明度：0.5）。 我尝试使用：

window.add(AttributeAppender.append("style","color:red; font-weight:bold")); 
or 
window.setCssClassName("custom-modal");

但这些解决方案都不允许应用所需的样式

任何帮助都将不胜感激

---

谢谢

您的解决方案不起作用的原因是wicket没有使用ModalWindow的

在屏幕上显示实际模式，而是创建了wicket modal类的新

因此，您不必更改ModalWindow的

样式，只需查找

并附加新的不透明度即可

以下是一个简单的例子：

final ModalWindow modal = new ModalWindow("modal");
    modal.setTitle("Trivial Modal");

    AjaxLink<Void> modalLink = new AjaxLink<Void>("modalLink") {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {

            target.appendJavaScript("var originalStyle = $('.wicket-modal').attr('style');"
                    + "$('.wicket-modal').attr('style', originalStyle + 'opacity: 0.5;');");
        }
    };
    Fragment modalFragment = new Fragment(modal.getContentId(), "modalContent", this);
    modalFragment.add(modalLink);
    modal.setContent(modalFragment);

    add(modal);
    add(new AjaxLink<Void>("openModal") {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {
            modal.show(target);
        }
    });

最终模态窗口模态=新模态窗口（“模态”）；
模态.setTitle（“平凡模态”）；
AjaxLink modalLink=新的AjaxLink（“modalLink”）{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void onClick（AjaxRequestTarget目标）{
target.appendJavaScript（“var originalStyle=$（'.wicket modal'）.attr（'style'）
+“$（'.wicket model'）.attr（'style'，originalStyle+'opacity:0.5；'）；”；
}
};
Fragment modalFragment=新片段（modal.getContentId（），“modalContent”，this）；
modalFragment.add（modalLink）；
modal.setContent（modalFragment）；
添加（模态）；
添加（新AjaxLink（“OpenModel”）{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void onClick（AjaxRequestTarget目标）{
模态显示（目标）；
}
});

和html文件：

<div wicket:id="modal"></div>
<wicket:fragment wicket:id="modalContent">
  <div wicket:id="modalLink">Change opacity</div>
</wicket:fragment>
<div wicket:id="openModal">Press me</div>

改变不透明度
按我

您可以使用下面的ModalWindow方法

setMaskType（ModalWindow.MaskType.SEMI_TRANSPARENT）

检查示例：

            final ModalWindow modal;
            add( modal = new ModalWindow( "modal" ) );

            modal.setCookieName( "modal window" );

            modal.setResizable( false );
            modal.setAutoSize( true );
            modal.setCssClassName( ModalWindow.CSS_CLASS_GRAY );

            modal.setPageCreator( new ModalWindow.PageCreator()
            {
                @Override
                public Page createPage()
                {
                    return new alertPopup( modal );
                }
            } );

            AjaxLink backButton = new AjaxLink<Void>( "previous-button" )
            {
                @Override
                public boolean isVisible()
                {
                    return true;
                }

                @Override
                public void onClick( AjaxRequestTarget target )
                {
                    modal.setMaskType( ModalWindow.MaskType.SEMI_TRANSPARENT );
                    modal.show( target );
                }
            };

最终模态窗口模态；
添加（模态=新模态窗口（“模态”）；
modal.setCookieName（“模态窗口”）；
modal.setresizeable（false）；
model.setAutoSize（真）；
modal.setcscslassname（ModalWindow.CSS_CLASS_GRAY）；
modal.setPageCreator（新的ModalWindow.PageCreator（）
{
@凌驾
公共页面createPage（）
{
返回新的alertPopup（模态）；
}
} );
AjaxLink backButton=新建AjaxLink（“上一个按钮”）
{
@凌驾
公共布尔值可见（）
{
返回true；
}
@凌驾
公共void onClick（AjaxRequestTarget目标）
{
modal.setMaskType（ModalWindow.MaskType.SEMI_TRANSPARENT）；
模态显示（目标）；
}
};