Làm cách nào để từ bỏ tính minh bạch của Hộp thoại PrimeFaces?

Question

Tôi đang cố gắng hiển thị cảnh báo bằng cách sử dụng Hộp thoại Primefaces thành phần trong trang JSF của tôi. Tôi có thể hiển thị hộp thoại, nhưng vấn đề của tôi là với độ trong suốt/độ trong suốt của hộp thoại này. Tôi đã ghi đè thuộc tính kiểu của hộp thoại bằng cách đặt opacity: 1.0 nhưng không hoạt động. Tôi muốn từ bỏ tính minh bạch của hộp thoại. Làm thế nào tôi có thể đạt được điều này một cách đơn giản?

trang JSF của tôi:

<f:view xmlns="http://www.w3.org/1999/xhtml" 
.... 
renderKitId="PRIMEFACES_MOBILE"> 
.... 
<pm:page title="Mobile Reports"> 
<pm:view id="reports" swatch="b"> 
<h:form> 
<pm:content> 
<div> 
<h:form> 
    .... 
    <p:dialog id="myDialog" 
     header="ERROR" 
     widgetVar="dlg" 
     modal="true" 
     style="opacity: 1.0;" 
     appendToBody="true"> 
     <p:commandButton id="decline" value="Couldn't display the report!" 
      onclick="dlg.hide()" type="button" /> 
    </p:dialog> 
    .... 
    <p:commandButton id="contractInfo" action="ContractInfo.xhtml" 
     value="Contract Information" style="width:100%;" 
     onerror="dlg.show();"> 
    </p:commandButton> 
    .... 
</h:form> 
</div> 
</pm:content> 
</h:form> 
</pm:view> 
</pm:page> 
</f:view> 

Output:

GPRS được hiển thị trong trang JSF, nó không phải là một phần của hộp thoại. Tuy nhiên, nó có thể nhìn thấy kể từ khi hộp thoại là minh bạch.

Lưu ý: Tôi đang sử dụng primefaces-mobile-0.9.3.jar

Answer 1

Tôi đã thử trọng phong cách css của các thành phần thoại trong trang JSF của tôi như đó (Ghi chú các ! important expression):

<p:dialog id="myDialog" header="ERROR" widgetVar="dlg" modal="true" 
     style="background: gray !important;" appendToBody="true"> 
     <p:commandButton id="decline" value="Couldn't display the report!" 
      onclick="dlg.hide()" type="button" /> 
</p:dialog> 

Và bằng cách nào đó hộp thoại là tốt hơn bây giờ, có vẻ như:

Tuy nhiên, ghi đè biểu định kiểu chung của thư viện PrimeFaces trong dự án của tôi có thể giúp tôi nhiều hơn để tùy chỉnh hộp thoại.

Đường dẫn của biểu định kiểu trong dự án web động của tôi: WebContent/assets/css/style.css Đây có thể là tài liệu tham khảo cho người gặp phải sự cố tương tự.

Answer 2

Khi cung cấp chủ đề tùy chỉnh, bạn phải tạo một tệp chủ đề. Chủ đề mặc định của PrimeFaces là Aristo. Để biết thêm thông tin về cách tạo chủ đề tùy chỉnh, hãy xem PrimeFaces Guide hoặc mobile PrimeFaces Guide.

Nếu bạn không muốn tạo chủ đề hoàn chỉnh, chủ đề mặc định sẽ được áp dụng. Để ghi đè các kiểu trong chủ đề được áp dụng, bạn cần sử dụng !important. (Bạn đã phát hiện ra điều này mặc dù.)

Một công cụ hữu ích mà tôi sử dụng là FireBug. FireBug cho thấy các quy tắc CSS nào được áp dụng cho một phần tử và cũng có các quy tắc nào bị ghi đè.

Answer 3

Để tất cả những ai có vấn đề này, tôi chỉ tìm thấy một giải pháp whit này:

<p:dialog header="Header" widgetVar="dlg1" showEffect="pop" 
      styleClass="ui-page-theme-a ui-bar-inherit"> 

Thêm primefaces kế thừa lớp vào hộp thoại, và nó sẽ xuất hiện theo mặc định.