प्राइमफेस संवाद की पारदर्शिता को कैसे छोड़ें?

Question

मैं अपने JSF पृष्ठ में प्राइमफ़ेस संवाद घटक का उपयोग करके एक अलर्ट प्रदर्शित करने का प्रयास कर रहा हूं। मैं संवाद प्रदर्शित कर सकता था, लेकिन मेरी समस्या इस संवाद की पारदर्शिता/अस्पष्टता के साथ है। मैंने opacity: 1.0 सेट करके संवाद की स्टाइल प्रॉपर्टी को ओवरराइड कर दिया है, लेकिन यह काम नहीं करता है। मैं संवाद की पारदर्शिता को त्यागना चाहता हूं। मैं इसे सरल तरीके से कैसे प्राप्त कर सकता हूं?

मेरे JSF पेज:

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

आउटपुट:

जीपीआरएस JSF पेज में प्रदर्शित किया जाता है, यह नहीं संवाद का एक हिस्सा है। हालांकि, यह तब दिखाई देता है जब संवाद पारदर्शी है।

नोट: मैं primefaces-मोबाइल-0.9.3.jar

Answer 1

मुझे लगता है कि की तरह मेरे JSF पेज में संवाद घटक के अधिभावी सीएसएस शैली की कोशिश की है उपयोग कर रहा हूँ (रिमार्क ! महत्वपूर्ण अभिव्यक्ति):

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

और किसी भी तरह संवाद अब बेहतर है, यह दिखाई देता है:

हालांकि, मेरे प्रोजेक्ट में प्राइमफेस लाइब्रेरी की सामान्य स्टाइलशीट को ओवरराइड करने से मुझे संवाद को अनुकूलित करने में और मदद मिल सकती है।

मेरी गतिशील वेब परियोजना में स्टाइलशीट पथ: WebContent/संपत्ति/सीएसएस/style.css इस संदर्भ हो सकता है जिनके लिए एक ऐसी ही समस्या का सामना करना पड़।

Answer 2

एक अनुकूलित थीम की आपूर्ति करते समय आपको थीम फ़ाइल बनाना होगा। प्राइमफेस की डिफ़ॉल्ट थीम अरिस्टो है। कस्टम थीम बनाने के तरीके के बारे में अधिक जानकारी के लिए PrimeFaces Guide या mobile PrimeFaces Guide देखें।

यदि आप हालांकि एक पूर्ण विषय बनाना नहीं चाहते हैं तो डिफ़ॉल्ट थीम लागू होती है। लागू विषय में शैलियों को ओवरराइड करने के लिए आपको !important का उपयोग करने की आवश्यकता है। (हालांकि आपने इसे पहले से ही खोजा है।)

फ़ायरबग का उपयोग करने वाला एक उपयोगी टूल है। फायरबग दिखाता है कि कौन से सीएसएस नियम किसी तत्व पर लागू होते हैं और कौन से नियम ओवरराइड होते हैं।

Answer 3

जो कोई यह समस्या है करने के लिए, मैं सिर्फ एक समाधान तिनका इस लगता है:

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

जोड़े primefaces संवाद करने के लिए वर्ग के वारिस, और यह डिफ़ॉल्ट रूप से दिखाई देगा।