Jqueryui: एक संवाद बॉक्स के चारों ओर एक छाया कैसे बनाना है?

Question

मैं एक jqueryui संवाद बॉक्स के चारों ओर एक ड्रॉप छाया डालने की कोशिश कर रहा हूँ।

<div id="dialog-form" class="ui-widget-shadow ui-corner-all"> 
    Some stuff in the box with a shadow around it 
</div> 

और फिर कर: की तरह कुछ

$(function() { 
    $("#dialog-form").dialog({ 
    resizable: false, 
    height: 300, 
    width: 350, 
    modal: true 
    }); 
}); 

जावास्क्रिप्ट खंड में

। मैं dialog-form संवाद के आसपास छाया कैसे बना सकता हूं?

Answer 1

आप इसे CSS3 का उपयोग करके प्राप्त कर सकते हैं, लेकिन यह सभी ब्राउज़रों में काम नहीं करेगा।

• सबसे पहले:

dialogClass: 'dialogWithDropShadow' 

• दूसरा: अपने संवाद कॉल में, "dialogClass" अपने द्वारा चयनित किसी वर्ग के नाम के बराबर का मान सेट अपने स्टाइलशीट में, चरण 1 में निर्दिष्ट कक्षा पर ड्रॉप छाया सेट करें।

<style type="text/css"> 
    .dialogWithDropShadow 
    { 
     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    } 
</style> 

वैकल्पिक रूप से, आप अन्य बूंद छाया तकनीक है कि तथ्य यह है कि आप HTML jQuery ui संवाद द्वारा प्रदान की गई नियंत्रित नहीं कर रहे हैं की वजह से जटिल हो जाएगा (संवाद, चित्र, आदि के पीछे div) का उपयोग करना होगा ।

शुभकामनाएं!

Answer 2

मैं इसके साथ संघर्ष कर रहा था और पाया कि CSS3 बॉक्स-छाया सुविधा शायद सबसे अच्छा समाधान है। हालांकि यह आईई 8 के साथ काम नहीं करेगा, मुझे यह स्वीकार्य लगता है। यहाँ आप क्या करते हैं:

सीएसएस

.ui-dialog-shadow { box-shadow: 0 0 0 7px rgba(0,0,0,0.1); } 

संवाद कोड

open: function() { $(".ui-dialog").addClass("ui-dialog-shadow"); }, 

मैं छाया है कि हम jQuery यूआई 1.6 के रूप में बारीकी से मैं कर सकता के रूप में किया था नकल करने की कोशिश की।