jQuery - संवाद गतिशील सामग्री पर ऑटो-आकार बदलें और केंद्र स्थिति बनाए रखें

Question

मेरे पास एक jQuery संवाद बॉक्स है और मैं अजाक्स का उपयोग कर सामग्री लोड कर रहा हूं।

डायलॉग प्रारंभ में पृष्ठ के केंद्र में है। समस्या यह है कि, इसकी एक गतिशील सामग्री के बाद, डेटा का आकार अज्ञात है। इसलिए, जब मुझे बड़ा डेटा मिलता है, तो संवाद केवल नीचे की तरफ बढ़ता है यानी संवाद नीचे फैलता है, और शीर्ष अभी भी एक ही स्थिति में है।

मैं क्या चाहता हूँ,

जब डेटा लोड किया जाता है, संवाद दोनों दिशा (ऊपर और नीचे) में विस्तार करना चाहिए, ताकि सामग्री स्क्रॉल किए बिना देखा है।

Answer 1

डिफ़ॉल्ट संवाद बिल्कुल सापेक्ष स्थिति है।

संवाद ऑटो ऊंचाई देने पर विस्तार कर सकता है, लेकिन जब पृष्ठ स्क्रॉल किया जाता है, तो संवाद स्वयं को बदल देता है।

यह करने के लिए एक ही रास्ता इन शैलियों संवाद

1. स्थिति को

   position : ['center',<distance from top>]

2. द्वारा विंडो में संवाद लागू सीएसएस शैली

   का उपयोग करके स्थिति को ठीक करें, है

   .fixed-dialog { position:"fixed" }

3. संवाद करने के लिए इस वर्ग के जोड़े

   dialogClass : 'fixed-dialog'

तो, संवाद आदि के उत्तर मैं इंटरनेट पर पाया मुझे संतुष्ट जब मैं देख रहा था की

$('#dialog-div').dialog({ 
     position : ['center',10], 
     dialogClass: "fixed-dialog" 
    }); 

Answer 2

कोई नहीं लगेगा समाधान पर यहां तक ​​कि यह भी नहीं करता है। JQuery API दस्तावेज़, I found something really interesting के बारे में बहुत कुछ पढ़ने के बाद। चूंकि यह वेब पेज वर्णन करता है, आप अजेक्स अनुरोध के बाद अपना काम पूरा करने के बाद किसी ईवेंट को बाध्य कर सकते हैं। बात यह है कि यह इस तरह आसान नहीं है; चूंकि मैं अपने स्वयं के परीक्षण कर रहा था, एपीआई दस्तावेज में दिए गए उदाहरण का उपयोग करके, मैं इसे काम नहीं कर सका। ऐसा लगता है कि मेरे JQuery संवाद "भविष्य" संदर्भ तरीके से मौजूद नहीं था। सभी तत्वों को जो वर्तमान चयनकर्ता से मेल, अब और भविष्य में के लिए एक ईवेंट हैंडलर संलग्न करें:

यह मैं this page जो विवरण दिया गया था का नेतृत्व किया। ढूँढना यह इस तरह एक समारोह बनाने के लिए मुझे सुराग:

$(document).live("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

और देखा! यह एक सम्मोहन की तरह काम करता है! AJAX अनुरोध करने के बाद, स्थिति संपत्ति बदल दी जाती है और div और इसके आयामों की सामग्री में अनुकूलित किया जाता है!

आशा है कि यह भविष्य में लोगों की सहायता करेगी!

संपादित करें: आप ".live()" के बजाय ".on()" फ़ंक्शन का उपयोग करना चाहेंगे। जब से मैंने अपना जवाब लिखा था, ऐसा लगता है कि यह संस्करण ".live()" जैसा संस्करण 1 में हटा दिया गया है।JQuery के 9 और नए द्वारा प्रतिस्थापित किया गया। jQuery> = 1.9 के उपयोगकर्ताओं के लिए एक अधिक उपयुक्त समाधान कुछ इस तरह होगा:

$(document).on("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

Answer 3

Use this 
    modal: true, 
    width: '80%', 
    autoResize:true, 
    resizable: true, 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    } 

आदेश में एक ही होना चाहिए

Answer 4

मुझे लगता है कि समारोह का उपयोग करें:

function centerDialog(id){ 

    var d = $('#'+id).closest('.ui-dialog'), 
     w = $(window); 

    d.css({ 

    'top':(w.height()-d.outerHeight())/2, 
    'left':(w.width()-d.outerWidth())/2 

    }); 

}