JQuery संवाद मोडल विकल्प काम नहीं कर

Question

यह एचटीएमएल कोड है:

<div id="dialog" title="lala" style="display:none;"> 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

यह है जावास्क्रिप्ट

$bb('#addTopicButton').live('click',function() { 

    $bb("#dialog").dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

     }); 

क्यों मोडल काम नहीं कर रहा? जब यह खोला जाता है तब भी मैं पृष्ठ पर अन्य लिंक क्लिक कर सकता हूं और पृष्ठभूमि में चीजें कर सकता हूं।

धन्यवाद एक बहुत

अद्यतन: हालांकि यह काम कर रहा है। पृष्ठभूमि में केवल लिंक सक्रिय हैं और काम कर रहे हैं। लिंक सहित सभी चीज़ों को मैं कैसे अक्षम कर सकता हूं?

Answer 1

आपको शायद अपने पृष्ठ पर jQuery UI CSS शामिल करने की आवश्यकता है।

गूगल यहाँ अपने CDN पर इस है:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

संवाद पर मोडल विकल्प आपके संवाद के तहत लेकिन सामग्री के बाकी हिस्सों में आच्छादन बनाता है। इस ओवरले को jQuery UI सीएसएस को सही ढंग से कार्य करने की आवश्यकता है।

Answer 2

बस एक ही समस्या थी। मुझे सीएसएस की जरूरत थी, लेकिन मुझे यह सब नहीं चाहिए था। तो मैं सिर्फ अपने ही सीएसएस कोड में इस हिस्से चिपकाया कॉपी:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa; 
    opacity: 0.3; 
} 

Answer 3

अपने सीएसएस करने के लिए केवल .ui-विजेट ओवरले ओवरले पूरा शीर्ष पर प्रकट कर देगा, और यहां तक ​​कि संवाद जोड़ना व्यर्थ हो जाएगा।

इसलिए, .ui-सामने वर्ग भी जोड़ा जाना चाहिए:

.ui-widget-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.ui-front { 
    z-index: 100; 
}