jQuery संवाद हमेशा केंद्रित

Question

मैं कैसे कार्यान्वित कर सकता हूं कि ऑटो चौड़ाई & ऊंचाई के साथ एक jQuery मोडल संवाद हमेशा ब्राउज़र में केंद्रित होता है। ब्राउज़र की खिड़की का आकार बदलने के बाद भी।

निम्नलिखित कोड काम नहीं करता है। मुझे लगता है कि समस्या ऑटो चौड़ाई & ऊंचाई है।

jQuery - कोड

$("<div class='popupDialog'>Loading...</div>").dialog({ 
    autoOpen: true, 
    closeOnEscape: true, 
    height: 'auto', 
    modal: true, 
    title: 'About Ricky', 
    width: 'auto' 
}).bind('dialogclose', function() { 
    jdialog.dialog('destroy'); 
}).load(url, function() { 
    $(this).dialog("option", "position", ['center', 'center']); 
}); 

$(window).resize(function() { 
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
}); 

धन्यवाद!

margin-left:auto;margin-right:auto; 

यह काम नहीं करता:

Answer 1

संवाद बॉक्स के आसपास मोडल विंडो आप संवाद बॉक्स के सीएसएस के साथ केंद्रित डाल सकते हैं चाहिए? क्या आपके पास 'नमूना' पृष्ठ है जिसे हम देख सकते हैं?

Answer 2

$(window).resize(function() { 
    $("#dialog").dialog("option", "position", "center"); 
}); 

कार्य jsFiddle: http://jsfiddle.net/vNB8M/

संवाद ऊंचाई ऑटो चौड़ाई के साथ केंद्रित है & और विंडो आकार परिवर्तन के बाद केंद्रित किया जा रहा है।

Answer 3

Acutally, मैं, लगता है position: ["center", "center"] सबसे अच्छा समाधान नहीं हो के रूप में यह संवाद निर्माण पर व्यूपोर्ट के आकार के आधार पर करने के लिए एक explict top: और left: सीएसएस गुण प्रदान करती है।

स्क्रीन पर एक संवाद केंद्र होने की कोशिश करते समय मैं इसी मुद्दे पर आया। यहां मेरा समाधान है:

options.dialog() फ़ंक्शन का हिस्सा, मैं position:[null, 32] पास करता हूं। nullleft: को तत्व की शैली का मानता है, और 32 केवल संवाद बॉक्स को विंडो के शीर्ष पर रखने के लिए है। एक स्पष्ट चौड़ाई निर्धारित करने के लिए भी सुनिश्चित करें।

मैं भी dialogClass विकल्प का उपयोग एक कस्टम वर्ग, जो केवल एक margin:0 auto; सीएसएस संपत्ति है आवंटित करने के लिए:

.myClass{ 
    margin:0 auto; 
} 

और मेरे संवाद लगता है:

$('div#popup').dialog({ 
    autoOpen: false, 
    height: 710, 
    modal: true, 
    position: [null, 32], 
    dialogClass: "myClass", 
    resizable: false, 
    show: 'fade', 
    width: 1080 
    }); 

उम्मीद है कि इस में किसी को मदद मिलती है।

Answer 4

कोई जवाब नहीं जो मैं चाहता था। जिन लोगों के पास अभी भी समस्याएं हैं, उनके लिए यहां मेरे लिए क्या काम किया गया है। यह संवाद को हमेशा स्क्रीन के केंद्र में दिखाई देने के लिए मजबूर करेगा, और यह ब्राउज़र को आकार देने के रूप में संवाद को केन्द्रित करेगा।

$("#ShowDialogButton").click(function(){ 
    $("#MyDialog").dialog({ 
     show: 'fade' 
    }).dialog("option", "position", { my: "center", at: "center", of: window }); 

    $(window).resize(function() { 
     $("#MyDialog").dialog("option", "position", { my: "center", at: "center", of: window }); 
    }); 

}); 

Answer 5

यह समाधान काम कर रहा है:

$(window).resize(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
}); 

प्रदर्शन काफी खराब है, लेकिन आप आकार बदलने के अंत के लिए प्रतीक्षा कर सकते हैं: jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?।

मैं भी इस कोशिश की, लेकिन मैं तत्व की स्थिति को जो संवाद खोला से कम या अधिक स्क्रॉल नहीं कर सकते हैं: `window` पर

$(window).scroll(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});