css - 更改已显示的检票口 ModalWindow 的样式

Question

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

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

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

任何帮助将不胜感激！

谢谢

Answer 1

您可以使用以下 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 );
                }
            };

Answer 2

您的解决方案不起作用的原因是 wicket 不使用 ModalWindow<div>在屏幕中显示实际模态，而是创建了一个新<div>的类 wicket-modal。

因此，无需更改 ModalWindow 的<div>样式，您所要做的就是找到<div class='.wicket-modal'>并附加新的不透明度。

这是一个简单的例子：

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);
        }
    });

和 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>