JQuery संवाद पृष्ठ लोड

Question

पर प्रदर्शित किया गया है, मैंने एक पृष्ठ बनाया है जिसमें मानक JQuery UI फ़ंक्शन का उपयोग कर JQuery आधारित संवाद है। मैं JQuery की बॉक्स कार्यक्षमता के साथ ऐसा करता हूं ... बिल्कुल कुछ भी नहीं।

<div id = "myDialog"> 
    <!-- ... more html in here for the dialog --> 
</div> 

फिर JQuery जावास्क्रिप्ट में कहा जाता है कि एक संवाद करने के लिए <div> बदल देती है:

// pruned .js as an example of kicking up a JQuery dialog 
    $('#myDialog').dialog({ 
     autoOpen: false, 
     title: 'Title here', 
     modal: true 
     } 
    }); 

फिर, सादे-वनिला JQuery यहाँ संवाद के लिए मेरी HTML है। तो आप पैरेंट पेज पर एक लिंक पर क्लिक करके इस विज़ार्ड को शुरू करते हैं, और फिर यह एक JQuery संवाद उत्पन्न करता है जिसमें HTML का एक महत्वपूर्ण हिस्सा होता है जिसमें छवियां शामिल होती हैं, आदि

जैसा कि मैंने इस पृष्ठ को विकसित करना जारी रखा, मैंने नोटिस करना शुरू कर दिया जब मैंने ब्राउजर में पेज लोड किया था कि <div> टैग मैं उस JQuery में परिवर्तन कर रहा था तो संवाद में बहुत संक्षिप्त रूप से प्रदर्शित किया जाएगा। फिर पृष्ठ अपेक्षित कार्य करेगा। दूसरे शब्दों में, संवाद छुपाया नहीं जाएगा, यह पृष्ठ में संक्षिप्त रूप से ऑनलाइन प्रदर्शित किया जाएगा। काफी बदसूरत और अनौपचारिक लग रहा है! लेकिन एक विभाजित दूसरे के बाद, पृष्ठ सही ढंग से प्रस्तुत करेगा और जैसा कि मैंने अपेक्षित/वांछित देखा होगा।

समय के साथ, पृष्ठ का आकार बढ़ने के साथ ही, पृष्ठ गलत तरीके से प्रस्तुत होने के समय बढ़ेगा। मेरा अनुमान है कि ब्राउज़र का प्रतिपादन इंजन पृष्ठ को लोड करने के रूप में प्रस्तुत कर रहा है, फिर अंत में यह JQuery को लात मार रहा है जो <div> को एक संवाद में बदल देगा। यह JQuery फ़ंक्शन एक JQuery संवाद में सरल <div> को परिवर्तित करेगा और इसे छुपाएगा (क्योंकि मेरे पास ऑटो ओपन प्रॉपर्टी गलत है)। कुछ ब्राउज़र्स < खांसी > आईई </खांसी > इसे दूसरों की तुलना में अधिक प्रदर्शित करती है। मेरा बड़ा-आश संवाद अब पृष्ठ को लगभग 1 सेकंड के लिए गलत तरीके से प्रस्तुत करने का कारण बनता है ... YUCK!

Answer 1

तो यह छिपा डिफ़ॉल्ट रूप से है आप कुछ सीएसएस जोड़ सकते हैं, कोई ऑनलोड कोड की जरूरत:

#myDialog { display: none; } 

इस के साथ

, कोई अन्य कोड के लिए आवश्यक है, जब आप संवाद खोलने यह इस शैली रिवर्स देंगे ... तो document.ready पर चलाने के लिए अतिरिक्त कुछ नहीं।वैकल्पिक रूप से, आप संवाद के बहुत सारे है, तो वह एक वर्ग है, इस तरह दे:

<div id="myDialog" class="dialog"></div> 

इस सीएसएस के साथ:

.dialog { display: none; } 

लगभग सभी मामलों में, jQuery चीजों को छिपाने के लिए display शैली विशेषता का उपयोग करता है, इसलिए इस का उपयोग करते हुए शुरू में कुछ जो कुछ भी आप बाद के लिए तत्व का उपयोग करना चाहते के साथ काम करेंगे छिपाने के लिए, चाहे वह एक संवाद, एक सरल .fadeIn(), आदि

Answer 2

मैं इस समस्या के समाधान के साथ आया जो ठीक काम करता है, लेकिन मुझे आश्चर्य है कि कोई बेहतर तरीके से जानता है या नहीं।

समस्या यह है कि ब्राउज़र डोम को लोड करता है क्योंकि यह इसे लोड करता है, फिर अंत में JQuery .js को छिपाता है जो इसे छुपाता है। तो मैं जो कर रहा हूं वह माता-पिता <div> टैग में दृश्यता को बंद कर रहा है, इसलिए सभी संवाद सामग्री डिफ़ॉल्ट रूप से छिपी हुई है, फिर उस पैरेंट <div> टैग को .js में बदलना।

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog"> 
     <!-- ... more html in here for the dialog --> 
    </div> 
</div> 

तो

JQuery .js:

<script type="text/javascript"> 

$(document).ready(function() { 
    //turn the visibility on last thing 
    $("#bodyDiv").attr("style", "visibility:visible"); 
}); 
</script> 

के रूप में आप देख सकते हैं, मैं तो बस डिफ़ॉल्ट रूप से सब कुछ की दृश्यता बंद कर देते हैं तो पेज renders डब्ल्यू/संवाद सामग्री प्रदर्शित ओ, तो मैं बारी फिर से दृश्यता। यह एक आदर्श समाधान नहीं है क्योंकि यह अभी भी पृष्ठ को एक दूसरे के लिए हास्यास्पद बना सकता है लेकिन कम से कम संवाद HTML ऑनलाइन प्रदर्शित नहीं होता है। इस फिक्स के साथ यूएक्स स्वीकार्य है, हालांकि आदर्श नहीं है।

Answer 3

मैं & टैग नामकरण परिपाटी का एक सा के साथ CSS3 के चयनकर्ताओं का उपयोग है। मेरे सभी संवाद <div> तत्व हैं, और आईडी हमेशा "संवाद" के साथ समाप्त होती है। मैं तो इस सीएसएस का उपयोग करें:

div[id$=dialog] { display: none; } 

एक नमूना संवाद:

<div id="my-sample-dialog" title="Sample Dialog"> 
     <span>I'm invisible!</span> 
</div> 

मामले CSS3 में, एक विकल्प नहीं है आप एक ही परिणाम प्राप्त करने के सीएसएस 2 का उपयोग कर सकते हैं, लेकिन आप और अधिक सावधान नहीं होना है किसी भी <div> आईडी में संवाद उपनाम का उपयोग करने छिपा हो करने का इरादा नहीं:

div[id~=dialog] { display: none; } 

और की तरह "मेरे नमूना संवाद"

कुछ करने के लिए अपने संवाद आईडी सेट

एचटीएमएल

<div data-role="popup" class="popup"> 
    <!-- CONTENT --> 
</div> 

सीएसएस

.popup { display:none; } 
.ui-popup-container .popup { display:block; } 

मैं शुरू में छिपाने पॉपअप:

Answer 4

आप एक "पॉपअप" के बजाय एक "संवाद" उपयोग कर रहे हैं मैं निम्नलिखित करना था डिस्प्ले का उपयोग करना: jQueryUI के बाद और किसी भी कंटेनर में पॉपअप को लपेटने के बाद, दूसरी शैली को प्राथमिकता मिलती है।