이미 표시된 개찰의 스타일 변경 ModalWindow

Question

버튼 중 하나에서 클릭 이벤트가 발생한 후 모달 창을 투명하게 (투명도 : 0.5) 만들고 싶습니다. 나는 사용하여 시도 :

는

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

그러나 이러한 솔루션 중 누구도 원하는 스타일을 적용 할 수 없습니다.

도움이 될 것입니다!

감사

Answer 1

솔루션이 작동하지 않는 이유는, 화면의 실제 모달을 보여 모달 윈도의 <div>를 사용하지 않는 개찰구이지만, 대신 클래스 개찰구 모달의 새로운 <div>을 만듭니다.

그래서 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> 

다음

사소한 예입니다