jQuery संवाद विषय और शैली

मैं एक jQuery संवाद के शीर्षक पट्टी के पृष्ठभूमि रंग कैसे बदलूं?jQuery संवाद विषय और शैली

मैंने थीमरोलर को देखा है लेकिन यह मेरे लिए काम नहीं कर रहा है।

धन्यवाद

2009-03-31 Picflight

इस तरह के संवाद को प्रदर्शित करने के लिए आप किस प्लग-इन का उपयोग करते हैं इस पर निर्भर करता है (jQuery में कोई भी संवाद नहीं है)। –

मैं इस तरह से करते हैं (जोड़ने हेडर के लिए "ui-राज्य त्रुटि" शैली):

<script type="text/javascript"> 
      $(function() { 
       $("#msg").dialog({ 
        open: function() { 
         $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error"); 
        } 

       }); 

      }); 
     </script>

स्रोत

2009-12-02 14:17:29 DonSleza4e

इसे जावास्क्रिप्ट से न बदलें। सीएसएस का प्रयोग करें। –

संवाद में प्रत्येक तत्व से जुड़े वर्ग हैं।

तत्वों का निरीक्षण करने के लिए फायरबग का उपयोग करें और उन्हें स्टाइल करने के लिए सीएसएस का उपयोग करें। उदाहरण के लिए, शीर्षक पट्टी में वर्ग "ui-dialog-titlebar" है।

(यह मानता है कि आप jQuery यूआई संवाद का उपयोग कर रहे हैं)

स्रोत

2009-03-31 18:54:23 jonstjohn

आप ui-संवाद-शीर्षक पट्टी CSS वर्ग को संशोधित करके इसे बदल सकते हैं, लेकिन मैं अत्यधिक तुम ThemeRoller tool उपयोग करने के लिए सलाह देते हैं।

यह भी देखें:

स्रोत

2009-03-31 18:55:23 CMS

पिछले उदाहरण अच्छी तरह से काम करता है लेकिन त्रुटि विषय के केवल लाल रंग के साथ।

यहाँ

सिर्फ सीएसएस में शीर्षक छवि को बदलने के साथ एक सरल उपाय:

सीएसएस:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;  
}

जावास्क्रिप्ट:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
     $(this).parents(".ui-dialog:first").find(".ui-widget-header") 
      .removeClass("ui-widget-header").addClass("ui-widget-header-custom"); 
    } 
});

सूचना है कि पिछले उदाहरण के विपरीत, मैं हटा दिया :

removeClass("ui-widget-header")

बजाय सिर्फ पर वर्ग को जोड़ने का

find(".ui-dialog-titlebar")

ध्यान दें चाहिए कि इस उदाहरण अपने लिंक के बिना संवाद हेडर के साथ काम करता है।

स्रोत

2011-07-14 18:39:05

dialogClass संपत्ति का उपयोग करें। आप jquery संवाद में जो भी सीएसएस पर आवेदन कर सकते हैं। नीचे हम हेडर और सामग्री ब्लॉक स्वरूपण कर रहे हैं।

<head> 
<style> 
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase} 
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff} 
</style> 
<script> 
     $('#jq_dialog').dialog({ 
      title: 'Detalhes do produto', 
      modal: true, 
      resizable: false, 
      width: 500, 
      maxHeight: 400, 
      closeText: 'fechar', 
      draggable: true, 
      show: 'fade', 
      hide: 'fade', 
      dialogClass: 'main-dialog-class' 
     }); 
</script> 
</head> 
<body> 
<div id="jq_dialog">Hello StackOverflow!</div> 
</body>

स्रोत

2012-08-16 13:16:44

मैं सहमत हूं। जावास्क्रिप्ट के साथ कक्षाओं को लागू या निकालना ऐसा लगता है कि इसके बारे में गलत तरीका है। सीएसएस कक्षाएं तत्व की स्थिति का सही वर्णन कर रही हैं, आप बस उस स्थिति में तत्व की उपस्थिति को बदलना चाहते हैं। – ctb

मोडल पॉपअप के बटनों के रंग बदलने के बारे में क्या? –

कभी-कभी आप सीएसएस फ़ाइल को संपादित नहीं कर सकते हैं। तो आप इसे आजमा सकते हैं:

dialog = $('<div/>').dialog({ 
    title: 'Dialog with css for title bar', 
    open: function() { 
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E'); 
    } 
});

स्रोत

2014-04-07 09:56:33 Hermann77

jQuery संवाद विषय और शैली

उत्तर

संबंधित मुद्दे