मैं स्क्रॉल विंडो में एक मोडल संवाद केंद्र करने की कोशिश कर रहा हूँ। यह मोडल स्थिति पूर्ण है क्योंकि स्क्रीन में खींचने योग्य होना चाहिए। मैं खींचने योग्य समारोह के लिए इस प्लगइन का उपयोग करें:स्क्रॉल विंडो में केंद्र मोडल संवाद कैसे पूर्ण स्थिति के साथ?
http://threedubmedia.com/code/event/drag
मेरे समस्या इस मोडल स्थिति पूर्ण है कि अगर मैं शीर्ष डाल: 50% यह केंद्र विंडो में मॉडल प्रदर्शित लेकिन सभी स्क्रॉल खिड़की पर विचार नहीं।
यदि यह स्क्रोल करने योग्य div के अंदर है, तो सुनिश्चित करें कि कि मूल div है: <div style="position:relative;">।
इस तरह, एक div यह है कि पूर्ण यह की सीमाओं के अंदर रहना होगा, और के लिए top:50%;
एक संदर्भ बिंदु के रूप में अपनी मूल रिश्तेदार div का उपयोग अंदर आप का उपयोग करना चाहिए
position:fixed
इसके बजाय पूर्ण/रिश्तेदार।
स्थिति: निश्चित तत्व ब्राउज़र विंडो के सापेक्ष स्थित है।
इसका उपयोग करें और आपको स्क्रॉलिंग के कारण किसी भी समस्या का सामना नहीं करना चाहिए।
http://www.w3schools.com/cssref/pr_class_position.asp
तुम भी इस विषय को देख सकते हैं,:
सामान्य तौर पर, स्क्रॉल बार साथ व्यूपोर्ट के केंद्र खोजने के लिए। खिड़की की ऊंचाई लें, 2 से विभाजित, प्लस स्क्रॉल टॉप। परिणाम पिक्सेल की संख्या है कि दस्तावेज़ शीर्ष से कुछ ऑफसेट होना चाहिए।
यदि आपका स्थान तत्व एक से अधिक स्क्रोल करने योग्य तत्व का बच्चा है तो आपको उन लोगों के लिए खाते की आवश्यकता होगी, लेकिन मूल गणित समान है।
एक साइड नोट के रूप में, आप जिस मार्कअप का उपयोग करने का प्रयास कर रहे हैं उसका एक उदाहरण अधिक सटीक उत्तरों प्राप्त करने में मदद करेगा।
तो आपके संवाद की स्थिति पूर्ण हो गई है और यह दस्तावेज़/निकाय का तत्काल बच्चा है, है ना?
निरपेक्ष स्थिति के साथ एक के लिए प्रेरित किया मोडल केंद्रित:
// Get the document offset :
var offset = $(document).scrollTop(),
// Get the window viewport height
viewportHeight = $(window).height(),
// cache your dialog element
$myDialog = $('#MY_DIALOG');
// now set your dialog position
$myDialog.css('top', (offset + (viewportHeight/2)) - ($myDialog.outerHeight()/2));
कोशिश स्थिति विकल्प
$dialog = $('<div><table width="100%" height="100%"><tr><td height="100%" align="center"><img style="vertical-align:middle" src="css/images/ajax-loader.gif"></td></tr></table></div>')
.html(msj)
.dialog({
title:"Validacion del ingreso.",
width:350,
height:200,
modal:true,
draggable:true,
buttons: {
"Aceptar": function()
{
$(this).dialog("close");
$(this).dialog("destroy");
}
}
});
मैं स्थिति के साथ परीक्षण नष्ट कर दिया: तय है, लेकिन jQuery खींचने योग्य प्लगइन काम नहीं करता। – paganotti
मुझे लगता है कि यह अपने मूल तत्वों के सीएसएस की वजह से है। क्या आप कुछ स्रोत कोड या बेवकूफ उदाहरण प्रदान कर सकते हैं? – gotqn
यह आईओएस सफारी पर अच्छी तरह से काम नहीं करता है। मोडल के पीछे स्क्रॉल तत्वों पर "tappable" होगा जो मॉडलों का इच्छित व्यवहार नहीं है। – greaterKing