पर तय किया जाना चाहिए jQuery UI के लिए मोडल विंडो को ठीक करने की कोई संभावना है, इसलिए जब उपयोगकर्ता दाईं तरफ स्क्रोलर का उपयोग कर रहा है, तो स्क्रॉल के पीछे की ओर, लेकिन मोडल विंडो ठीक रह रही है ?jQuery UI मॉड्यूल डायलॉग स्क्रॉल
निश्चित स्थिति के साथ एक सीएसएस वर्ग बनाएँ:
$(".selector").dialog({ dialogClass: 'fixed-dialog' });
यहाँ एक काम कर उदाहरण है:
.fixed-dialog{
position: fixed;
top: 50px;
left: 50px;
}
फिर जब आप संवाद बनाने के विकल्पों में से हिस्से के रूप में वर्ग संलग्न http://jsfiddle.net/3hrSv/ उदाहरण बहुत चमकदार नहीं है क्योंकि मैं संवाद शैली बनाने के लिए jsfiddle नहीं मिल सका।
रूप ने सुझाव दिया कि आप स्क्रीन के बीच में संवाद केंद्र के लिए अपने सीएसएस में top:50%; left:50%; सेट करने का प्रयास करना चाहते हैं: http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/
आप इस व्यवहार के लिए अपने संवादों के सभी चाहते हैं, तो आप अपने jquery.ui.dialog.css संशोधित कर सकते हैं फ़ाइल।
बदलें:
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
करने के लिए:
.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }
या, आप मूल फ़ाइल को बचाने के लिये, बस लाइन जोड़ने चाहते हैं: अपने सीएसएस से एक के लिए
div.ui-dialog {position:fixed;}
पेज द्वारा संदर्भित फाइलें, या पेज पर स्टाइल ब्लॉक।
यह एक पुराना सवाल है, लेकिन मैंने पाया कि जेम्स का जवाब (JQuery के div.ui- संवाद को स्थिति में तय करने के लिए: निश्चित) इस प्रश्न के उत्तर का आधा प्रदान किया गया है। दूसरा आधा यह है: सुनिश्चित करें कि मूल तत्व की ऊंचाई 100% है। मेरे मामले में, शरीर मेरी संवाद करने के लिए माता-पिता है, इसलिए मैं इस लाइन है:
<body style='height: 100%; min-height: 100%;'>
कि, प्लस जेम्स 'सुझाव मेरी सीएसएस फ़ाइल में जोड़ने के लिए:
div.ui-dialog {position:fixed;}
... अंत में ब्राउज़र संवाद के केंद्र में दिखाई देने के लिए मेरे संवाद मिल गए और स्क्रॉल करते समय वहां रहे। उम्मीद है कि यह भविष्य के googlers में मदद करता है जो यहां से गुजर सकता है।
या सीएसएस लागू करने के लिए जब आप इसे बनाने के लिए:
$("#Modal").dialog({
autoOpen: false,
width: 500,
height: 'auto',
position: [50, 150],
create: function (event) {
$(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
}
});
शैली बेला के लिए कहा: http://jsfiddle.net/3hrSv/2/ –
ठीक है, लेकिन layoer केंद्रित नहीं किया जाएगा। यह 50px शीर्ष और 50px शेष रहेगा, लेकिन यह केंद्र नहीं है। इसे कैसे केन्द्रित करें? –
निको निक मैंने केंद्र को संभालने के लिए अपना जवाब अपडेट किया, मुझे नहीं पता था कि आप इसे केंद्रित रखना चाहते हैं। –