JQuery मॉडल बॉक्स पोजिशनिंग

Question

ठीक है। मैं गतिशील तालिका के व्यावसायिक विवरण प्रदर्शित करने के लिए एक मॉडल बॉक्स पॉप अप विंडो का उपयोग कर रहा हूं। यह टेबल बहुत लंबी है। सब कुछ मोडल बॉक्स के साथ सही काम करता है, लेकिन अगर वे पृष्ठ के निचले भाग तक स्क्रॉल किए जाते हैं, तो यह हमेशा पृष्ठ के शीर्ष पर मॉडल बॉक्स खोलता है। इसलिए उन्हें इस तरह से बहुत सी स्क्रॉलिंग करना होगा।

मैं वर्तमान में इस मोड का उपयोग अपने मोडल बॉक्स को केंद्र में करने के लिए कर रहा हूं।

function centerPopup(x){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#popup" + x).height(); 
    var popupWidth = $("#popup" + x).width(); 
    //centering 
    $("#popup" + x).css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/4 
    }); 
    //only need force for IE6 

    $('#backgroundPopup').css({ 
     "height": windowHeight 
    }); 

} 

यदि इस कोड है कि यह प्रभावशाली में कुछ है मैं नहीं जानता। चारों ओर एक काम को नीचे स्क्रॉल करना होगा जहां वे पहले थे लेकिन मुझे .position पर अधिक दस्तावेज नहीं मिल सका।

Answer 1

http://www.west-wind.com/weblog/posts/459873.aspx

इस लड़के ने एक प्लगइन बनाया जो पृष्ठ में किसी भी तत्व को .centerInClient जोड़कर केंद्रित करता है। बहुत चालाक बहुत बढ़िया समय बचाओ।

position:fixed; 

यह IE7 + में काम किया, IE6 के लिए आप उन्नत विधियों से ऊपर की आवश्यकता हो सकती:

Answer 2

जब मॉडल के पहले से ही कड़ी मेहनत कर चुके हैं तो कई पहलुओं का पुन: आविष्कार क्यों किया जाता है। blockui, impromptu, jqmodal प्लगइन्स देखें। भले ही आप उनका उपयोग न करें, आप स्रोत स्क्रिप्ट देख सकते हैं और आप जो चाहते हैं उसे प्राप्त करने के उदाहरण देख सकते हैं।

Answer 3

ये रहा:

var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset; 
var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset; 

var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth; 
var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight; 

var left = scrolledX + (screenWidth - $("#popup" + x).width())/2; 
var top = scrolledY + (screenHeight - $("#popup" + x).height())/2; 

//Use the top and left variables to set position of the DIV. 

हालांकि मैं redsquare से सहमत पहिया पुनर्रचना में कोई मतलब नहीं है कि, मौजूदा प्लग इन का उपयोग।

संपादित करें: आपकी अंतिम कोड इस तरह दिखना चाहिए:

function centerPopup(x) 
{ 

    var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset; 
    var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset; 

    var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth; 
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight; 

    var left = scrolledX + (screenWidth - $("#popup" + x).width())/2; 
    var top = scrolledY + (screenHeight - $("#popup" + x).height())/2; 

    //centering 
    $("#popup" + x).css({ 
     "position": "absolute", 
     "top": top, 
     "left": left 
    }); 
    //only need force for IE6 

    $('#backgroundPopup').css({ 
     "height": screenHeight 
    }); 

} 

Answer 4

यहाँ एक नया 'चिपचिपा' विकल्प होता है करने के लिए jQuery यूआई संवाद प्लगइन का विस्तार करने के लिए अच्छा तरीका है ...

// This code block extends the ui dialog widget by adding a new boolean option 'sticky' which, 
// by default, is set to false. When set to true on a dialog instance, it will keep the dialog's 
// position 'anchored' regardless of window scrolling - neato. 

// Start of ui dialog widget extension... 
(function(){ 
    if($.ui !== undefined && $.ui.dialog !== undefined) 
    { 
     var UIDialogInit = $.ui.dialog.prototype._init; 
     $.ui.dialog.prototype._init = function() 
     { 
      var self = this; 
      UIDialogInit.apply(this, arguments); 

      //save position on drag stop for sticky scrolling 
      this.uiDialog.bind('dragstop', function(event, ui) 
      { 
       if (self.options.sticky === true) 
       { 
        self.options.position = [(Math.floor(ui.position.left) - $(window).scrollLeft()), 
              (Math.floor(ui.position.top) - $(window).scrollTop())]; 
       } 
      }); 

      //we only want to do this once 
      if ($.ui.dialog.dialogWindowScrollHandled === undefined) 
      { 
       $.ui.dialog.dialogWindowScrollHandled = true; 
       $(window).scroll(function(e) 
       { 
        $('.ui-dialog-content').each(function() 
        { //check if it's in use and that it is sticky 
         if ($(this).dialog('isOpen') && $(this).dialog('option', 'sticky')) 
         { 
          $(this).dialog('option', 'position', $(this).dialog('option','position')); 
         } 
        }); 
       }); 
      } 
     }; 

     $.ui.dialog.defaults.sticky = false; 
    } 
})(); 
// End of ui dialog widget extension... 

Answer 5

मेरे लिए एक सरल समाधान के लिए मोडल विंडो की युक्त तत्व के लिए सीएसएस स्थापित करने के लिए किया गया था।

Answer 6

मुझे नहीं पता कि हर कोई प्लगइन का उपयोग क्यों करता है .. क्यों पहिया को फिर से शुरू करें। सीखने को परेशान क्यों करें .. बस इसे करने के लिए किसी और को प्राप्त करें। मैं 1.3.x से jquery का उपयोग कर रहा हूं और कई प्लगइन्स फूले हुए हैं, सभी नहीं, लेकिन कई। मैं एक ही समाधान कई प्लग करने के लिए मैं 1/4 कोड की लाइनों में अध्ययन किया लिखा है, के साथ साथ वे क्या मैं उन्हें चाहते हैं।

और मैं भूल जाते हैं ... एक सरल उपाय शीर्ष करने के लिए स्क्रॉल की समस्या को जोड़ने के लिए ... अवास्तविक लौटाते है से पहले; एक बार आपका मोडल या पोजिशनिंग कोड चलने के बाद ।

Answer 7

यहाँ ModelPopup की स्थिति स्थापित करने के लिए बहुत अच्छा जवाब है। यह सब आपकी मदद कर सकता है।

1. वह स्थिति प्राप्त करें जिसे आप मॉडल विंडो दिखाना चाहते हैं। आप Sys.UI.DomElement.getLocation विधि का उपयोग कर ASP.NET अजाक्स लाइब्रेरी का उपयोग करके ऐसा कर सकते हैं:

   var location = Sys.UI.DomElement।getLocation ($ ("div1") प्राप्त);

इस मामले में मैंने इसके आगे मोडल विंडो सेट करने के लिए कुछ div नियंत्रण का उपयोग किया।

1. इसके पैनल या div तत्व का उपयोग करके मॉडल विंडो संदर्भ प्राप्त करें।

2. मोडल विंडो का स्थान तय करें:

   Sys.UI.DomElement.setLocation ($ ('Panel1'), location.x, location.y प्राप्त);