jQuery यूआई संवाद स्थिति

Question

मैं का उपयोग करने की कोशिश कर रहा हूँ jQuery संवाद यूआई पुस्तकालय ताकि कुछ पाठ के बगल में एक संवाद को स्थिति में लाया जा सके। JQuery का संवाद एक स्थिति पैरामीटर लेता है जिसे वर्तमान व्यूपोर्ट के ऊपरी बाएं कोने से मापा जाता है (दूसरे शब्दों में, [0, 0]इसे हमेशा अपने ब्राउज़र विंडो के ऊपरी बाएं कोने में रखा जाएगा, भले ही आप वर्तमान में स्क्रॉल किए गए हों)। हालाँकि, मुझे पता लगाने का एकमात्र तरीका ENTIRE पृष्ठ के सापेक्ष तत्व का है।

निम्नलिखित मेरे पास वर्तमान में है। position.top1200 या कुछ की तरह होने की गणना की जाती है, जो पृष्ठ पर मौजूद बाकी सामग्री के नीचे संवाद को अच्छी तरह से रखता है।

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

मुझे सही स्थिति कैसे मिल सकती है?

धन्यवाद!

Comments

संस्करण 1.9 के रूप में एक देशी टूलटिप विजेट है।

— दिबांग

Answer 1

किसी डायलॉग के अन्य कार्यान्वयन के लिए कुछ jQuery प्लगइन्स देखें। Cluetip एक सुविधा संपन्न टूलटिप / संवाद शैली प्लग-इन प्रतीत होती है। 4 डी डेमो आप क्या करने की कोशिश कर रहे हैं के समान लगता है (हालांकि मैं देखता हूं कि इसमें सटीक स्थिति विकल्प नहीं है जो आप खोज रहे हैं।)

Comments

टूटी हुई कड़ी। मैं इस प्लगइन को बनाए रखने की हिम्मत नहीं करता। शायद किसी अन्य उत्तर का चयन करना बुद्धिमानी होगी?

— जॉन

Answer 2

एक विकल्प के रूप में, आप jQuery यूआई Positionउपयोगिता जैसे उपयोग कर सकते हैं

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

Comments

यह सबसे अच्छा तरीका है। मैं इस बात पर ध्यान दूंगा, कि यदि आप पहली बार संवाद बना रहे हैं, तो आपको dialogइस तरह के लिए एक अतिरिक्त कॉल की आवश्यकता होगी :$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });

— wsanville

JQuery यूआई स्थिति उपयोगिता छिपे हुए तत्वों पर काम नहीं करती है इसलिए आपको इस कोड के साथ स्थिति से पहले संवाद खोलना होगा।

— Toadmyster

jQuery UI इसे करने का सबसे अच्छा तरीका है। स्कॉट गोंजालेज़ ने jQuery UI कैसे काम करता है और इसका उपयोग कैसे किया जाता है, इसकी गहन व्याख्या की है

— strangeloops

मुझे यह भ्रामक लगता है कि उदाहरण के लिए यह होना चाहिए: at: 'top+50'इसके बजायat: 'top + 50'

— लैमी

संघर्षरत किसी के लिए (जैसा कि मैं अभी था) एक से अधिक पदों को कैसे सेट किया जाए, यह इस प्रकार है:$('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— मल्लाह

Answer 3

उपरोक्त कुछ उत्तरों के लिए धन्यवाद, मैंने प्रयोग किया और अंततः पाया कि आपको जो कुछ भी करने की आवश्यकता है वह है मोडल डायलॉग की परिभाषा में "स्थिति" विशेषता को संपादित करना:

position:['middle',20],

JQuery को क्षैतिज "X" मान के लिए "मध्य" पाठ के साथ कोई समस्या नहीं थी और मेरा संवाद बीच में 20px ऊपर से नीचे की तरफ पॉप अप हुआ था।

मैं दिल से JQuery।

Comments

बिना किसी अतिरिक्त प्लगइन्स और सहज ज्ञान युक्त काम करता है। सबसे अच्छा समाधान मैंने देखा है।

— १०:५

असाधारण रूप से सरल समाधान, जिसमें कोई अतिरिक्त प्लगइन्स नहीं है। यह स्वीकृत उत्तर होना चाहिए।

— कामुई

डारन, यह अच्छा है, लेकिन यह पदावनत किया गया है- "नोट: स्ट्रिंग और एरे रूपों को हटा दिया गया है।" api.jqueryui.com/dialog/#option-position तो आपको स्थिति ऑब्जेक्ट का उपयोग मेरे / चीज़ के / पर करने की आवश्यकता होगी। "JQuery UI स्थिति" के बारे में लिंक देखें। आपको स्थिति कुछ ऐसी मिल सकती है: {my: "center top", at: "center top + 20", of: window} आप चाहते हैं कि काम करने के लिए। अधिक उदाहरणों के लिए लिंक देखें।

— मकाटो

@ मीकाटो ... jquery ui 1.10 के अनुसार , स्थिति स्ट्रिंग और सरणी को स्वीकार करती है। ... ... लेकिन मुझे अभी भी ऑब्जेक्ट नोटेशन पसंद है (मुझे चाबियाँ पसंद हैं)।

— dsdsdsdsd

मुझे विश्वास नहीं हो रहा है कि आपको डायलॉग पॉपअप करने के लिए बस इतना कोड चाहिए।

— Gi1ber7

Answer 4

सभी उत्तरों को पढ़ने के बाद, यह आखिरकार मेरे लिए काम कर गया:

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

Comments

इस जवाब ने मेरे लिए काम किया, और मुझे शायद कई मिनटों / घंटों की बचत हुई कि दूसरे समाधानों को कैसे सेटअप किया जाए। धन्यवाद!

— नाथन

+1 जब मैंने समझा तो इससे मुझे बहुत मदद मिली। पोज़िशन () सापेक्ष स्थिति और .offset () देता है, पूर्ण स्थिति (जो भी आवश्यक हो

— daniloquio

Answer 5

जयमीन के उदाहरण को एक कदम आगे बढ़ाते हुए, मैं आपके द्वारा अभी-अभी क्लिक किए गए तत्व के ऊपर एक jQuery के ui- संवाद तत्व की स्थिति के लिए आया (लगता है कि "भाषण बुलबुला"):

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

ध्यान दें कि मैं संबंधित चौड़ाई और ऊंचाई के ऑफसेट की गणना करने से पहले यूआई-संवाद तत्व को "खोल" देता हूं। इसका कारण यह है कि jQuery बाहरीविद्या () या आउटरहाइट () का मूल्यांकन नहीं कर सकता है, बिना पृष्ठ में दिखाई दे रहे यूआई-डायलॉग तत्व के बिना।

बस अपने संवाद विकल्पों में असत्य पर 'मोडल' सेट करना सुनिश्चित करें और आप एक ओके होना चाहिए।

Comments

मुझे लगता है कि आपके दो चरों का मतलब है myDialogXऔरmyDialogY

— केसी

Answer 6

http://docs.jquery.com/UI/API/1.8/Dialog

बाएं शीर्ष कोने पर निश्चित संवाद के लिए उदाहरण:

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});

Comments

मेरे लिए यह अनुसरण करने के लिए सबसे सरल था, बस एक विशेषता और आपको समाधान मिल गया। मुझे नहीं पता था कि "स्थिति" का उल्लेख इस वर्ग कोष्ठक वाक्य-विन्यास के साथ ऊँचाई / चौड़ाई आदि के साथ किया जा सकता है।

— user734028

मेरे पास कोई सुराग नहीं है, बहुत पहले है: D

— xhochn

Answer 7

अपनी जाँच <!DOCTYPE html>

मैंने देखा है कि अगर तुम बाहर याद आती है <!DOCTYPE html> अपनी HTML फ़ाइल के ऊपर से , तो संवाद को विंडो के भीतर नहीं, दस्तावेज़ सामग्री के भीतर केंद्रित दिखाया गया है, भले ही आप स्थिति निर्दिष्ट करें: {my: 'center', at: 'center' का: विंडो}

ईजी: http://jsfiddle.net/npbx4561/ - रन विंडो से सामग्री को कॉपी करें और डोकाइप को हटा दें। HTML के रूप में सहेजें और समस्या को देखने के लिए चलाएँ।

Comments

यह सटीक समस्या थी जो मेरे पास थी, और इसने इसे ठीक कर दिया।

— BobRodes

मेरा xml ट्रांसफ़ॉर्म doctype को जोड़ने में विफल रहा, इस उत्तर के साथ: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt को मेरे लिए रोलिंग चीजें मिलीं।

— डैनियल बोवर

मैं इस महान उत्तर के लिए 1 से अधिक उत्थान की कामना करता हूं। इसने मेरा मुद्दा तय कर दिया जिसके लिए मैं घंटों संघर्ष कर रहा था।

— डॉ। डीएस

Answer 8

इसे नियंत्रण के शीर्ष पर रखने के लिए, आप इस कोड का उपयोग कर सकते हैं:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });

Answer 9

$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

एक तत्व के तहत एक संवाद प्रस्तुत करता है। मैंने ऑफसेट () फ़ंक्शन का उपयोग सिर्फ इसलिए किया क्योंकि यह ब्राउज़र के ऊपरी बाएं कोने के सापेक्ष स्थिति की गणना करता है, लेकिन स्थिति () फ़ंक्शन मूल माता-पिता या तत्व के उस माता-पिता के सापेक्ष स्थिति की गणना करता है।

Answer 10

के बजाय शुद्ध jquery, मैं करना होगा:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

अगर मैं आपके प्रश्न को सही ढंग से समझ रहा हूं, तो आपके पास जो कोड है वह डायलॉग का स्थान ले रहा है जैसे कि पृष्ठ में कोई स्क्रॉल नहीं था, लेकिन आप चाहते हैं कि वह स्क्रॉल को ध्यान में रखे। मेरे कोड को ऐसा करना चाहिए।

Comments

किसी कारण के लिए, document.scrollleft मेरे लिए अपरिभाषित है।

— विकेटकीपोक

मेरा बुरा, इसका स्क्रॉललैट स्क्रोलटॉप कैपिटलाइज़ करना भूल गया

— शमूएल

var x = el.position ()। left + el.outerWidth (); var y = el.position ()। शीर्ष - $ (दस्तावेज़) .scrollTop (); मेरे लिए काम किया। समस्या यह है कि मैं इसमें जानकारी बदलने के बाद संवाद की ऊंचाई और चौड़ाई प्राप्त नहीं कर सकता।

— rball

Answer 11

यह पृष्ठ दिखाता है कि अपनी स्क्रॉल ऑफ़सेट का निर्धारण कैसे करें। jQuery की कार्यक्षमता समान हो सकती है लेकिन मैं इसे नहीं खोज सका। पृष्ठ पर दिखाए गए getScrollXY फ़ंक्शन का उपयोग करते हुए, आपको .position () परिणामों से x और y कोऑर्डर्स को घटाने में सक्षम होना चाहिए।

Answer 12

थोड़ा देर से लेकिन आप $ j (ऑब्जेक्ट) .offset () का उपयोग करके इसे कर सकते हैं। बाएं और तदनुसार .top।

Answer 13

मुझे नहीं लगता कि भाषण का बुलबुला काफी सही है। मैंने इसे थोड़ा ट्विक किया ताकि यह काम करे और आइटम लिंक के नीचे खुल जाए।

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

Answer 14

केंद्र की स्थिति ठीक करने के लिए, मैं उपयोग करता हूं:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 15

यहाँ कोड है .., jQuery यूआई संवाद को केंद्र में कैसे रखें ...

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });

Answer 16

$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });

Answer 17

आप उपयोग कर सकते हैं $(this).offset(), स्थिति माता-पिता से संबंधित है

Answer 18

मैंने सभी प्रस्तावित समाधानों की कोशिश की है, लेकिन वे काम नहीं करेंगे क्योंकि संवाद मुख्य दस्तावेज़ का हिस्सा नहीं है और इसकी अपनी परत होगी (लेकिन यह मेरा शिक्षित अनुमान है)।

1. के साथ संवाद आरंभ करें $("#dialog").dialog("option", "position", 'top')
2. इसके साथ खोलें $(dialog).dialog("open");

3. फिर प्रदर्शित संवाद का x और y प्राप्त करें (दस्तावेज़ का कोई अन्य नोड नहीं!)

   var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

   var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

   $(dialog).dialog('option', 'position', [xcoord , ycoord]);

इस तरह से निर्देशांक दस्तावेज़ से नहीं संवाद से हैं और संवाद की परत के अनुसार स्थिति बदल जाती है।

Answer 19

मैंने अपने संवाद को पृष्ठ पर केंद्रित करने के लिए कई तरीकों की कोशिश की और देखा कि कोड:

$("#dialog").dialog("option", "position", 'top')

जब यह बनाया गया था तो संवाद की स्थिति कभी नहीं बदलें।

इसके बजाय, मैं संपूर्ण संवाद प्राप्त करने के लिए चयनकर्ता स्तर को बदलता हूं।

$("#dialog").parent() <- यह पैरेंट ऑब्जेक्ट है जो डायल () फ़ंक्शन DOM पर बनाता है, इसका कारण यह है कि चयनकर्ता $ ("# डायलॉग") विशेषताओं, टॉप, लेफ्ट को लागू नहीं करता है।

अपने संवाद को केंद्र में रखने के लिए, मैं jQuery-Client-Centering-Plugin का उपयोग करता हूं

$ ( "# संवाद") माता-पिता () centerInClient ()।।

Answer 20

उपरोक्त समाधान बहुत सही हैं ... लेकिन UI संवाद विंडो के आकार बदलने के बाद स्थिति को बरकरार नहीं रखता है। नीचे कोड यह करता है

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })

Answer 21

आपने केंद्र पर प्रदर्शन के लिए शैली में शीर्ष स्थान सेट किया, यह देखा कि कोड:

.ui-संवाद {शीर्ष: 100px! महत्वपूर्ण;}

इस शैली को डायल बॉक्स को 100px ऊपर से दिखाना चाहिए।