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>

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

2 个答案: