مربع الحوار jQuery UI غير محدد شاشة المركز

Question

لدي مربع حوار مسج يهدف إلى وضعه في منتصف الشاشة. ومع ذلك، يبدو أنه خارج المركز قليلا رأسيا.

هنا هو الرمز:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

أي أفكار لماذا هذا لن مركز؟

Answer 1

إذا تم تمرير Viewport الخاص بك بعد عرض الحوار، فلن يتم التركيز عليه. من الممكن أن تسبب عن غير قصد Viewport للتمرير عن طريق إضافة / إزالة المحتوى من الصفحة. يمكنك التحديثات القائم على نافذة الحوار أثناء التمرير / تغيير حجم الأحداث عن طريق الاتصال:

$('my-selector').dialog('option', 'position', 'center');

Answer 2

هل تضيف jquery.ui.position.js إلى صفحتك؟ كان لدي نفس المشكلة، فحص شفرة المصدر هنا وأدركت أنني لم أضيف أن JS إلى صفحتي، بعد ذلك .. حوار تركز بطريقة سحرية.

Answer 3

حفر قبر قديم هنا ولكن بالنسبة للباحثين جوجل جدد.

يمكنك الحفاظ على موضع النافذة النموذجية عندما يتم تمرير المستخدمين عن طريق إضافة هذا الحدث إلى الحوار الخاص بك. سيؤدي ذلك إلى تغييره من وضعه مطلقا إلى ثابت. لا حاجة لرصد أحداث التمرير.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

Answer 4

كانت لدي نفس المشكله. انتهى الأمر يجري jQuery.dimensions.js. توصيل في. إذا قمت بإزالة ذلك، كل شيء يعمل بشكل جيد. أدرجت ذلك بسبب مكون إضافي آخر يطلب منه، ومع ذلك اكتشفت من الرابط هنا تم تضمين تلك الأبعاد في JQuery Core منذ فترة طويلة (http://api.jquery.com/Category/dimensions.). يجب أن تكون موافق ببساطة تخلص من البرنامج المساعد الأبعاد.

Answer 5

1.) مراكز مربع الحوار المسج في أي عنصر تضعه فيه.

من دون مزيد من المعلومات، تخميني هو أن لديك جسم ديف بهامش أو شيء من أشبه. حرك الحف المنبثقة إلى مستوى الجسم، وسوف تكون جيدة للذهاب.

2.) إذا قمت بإضافة محتوى ديناميكيا إلى DIV أثناء تحميله، فلن يكون التركيز صحيحا. لا تعرض DIV حتى يكون لديك البيانات الخاصة بك وضعها.

Answer 6

ما عليك سوى إضافة خط CSS في نفس الصفحة.

.ui-dialog 
{
position:fixed;
}

Answer 7

لإصلاح هذه المشكلة، قمت بالتأكد من تعيين ارتفاع جسدي إلى 100٪.

body { height:100% }

يحتفظ هذا أيضا بموقف الوسط أثناء اختصاص المستخدم.

Answer 8

أضف هذا إلى إعلان الحوار الخاص بك

my: "center",
at: "center",
of: window

مثال :

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Answer 9

بالنسبة لي jquery.dimensions.js كان الجاني

Answer 10

غالبا ما تتعلق هذه المشكلة بفتح مربع الحوار عبر علامة مرساة (<a href='#' id='openButton'>Open</a>) ولا يمنع سلوك المتصفح الافتراضي في المعالج على سبيل المثال

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

هذا عادة ما يزيل الحاجة إلى أي مواقع تحديد المواقع / التمرير.

Answer 11

كنت تواجه نفس المشكلة التي لا تفتح مربع الحوار مركزة وتمرير صفحتي إلى الأعلى. العلامة التي أستخدمها لفتح مربع الحوار هي علامة مرساة:

<a href="#">View More</a>

كان رمز الجنيه يسبب القضية بالنسبة لي. كل ما فعلته هو تعديل href في المرساة مثل ذلك:

<a href="javascript:{}">View More</a>

الآن صفحتي سعداء ومركز الحوار.

Answer 12

سيناريو الخاص بي: اضطررت إلى التمرير لأسفل في الصفحة إلى فتح مربع الحوار على زر النقر على زر، نظرا لإنشاء النافذة لم يكن مربع الحوار لم يكن يفتح مركز رأسيا إلى نافذة، فقد خرج من المنظر المنظور.

مثل كين قد ذكر أعلاه، بعد تعيين تنفيذ محتوى مشرفي الخاص بك أدناه العبارة.

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

إذا تم تحميل المحتوى مسبقا قبل فتح مشروط فقط تنفيذ هذا في الحدث المفتوح، قم بإلغاء معالجة DOM في الحدث المفتوح ثم تنفيذ العبارة.

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

لقد عملت بشكل جيد بالنسبة لي وأفضل شيء هو أنه لا تشمل أي مساعد أو مكتبة أخرى لعمله.

Answer 13

فقط حل نفس المشكلة، وكانت المشكلة أنني لم استورد بعض ملفات JS، مثل widget.js :)

Answer 14

يبدو أن أي من الحلول المذكورة أعلاه تعمل من أجلي لأن التعليمات البرمجية تولد ديناميكيا اثنين من الشكوكات وداخلها صورة غير مخفوقة. كان الحل الخاص بي كما يلي:

يرجى ملاحظة استدعاء "تحميل" على IMG، والمعلمة "إغلاق" في مكالمة الحوار.

فار div = jQuery ('u003Cdiv style=";text-align:right;direction:rtl">u003C/div> ') .ATTR ({ID: "PreviewIfiMage"}) .Appendto (' الجسم '). hide ()؛ فار div2 = jQuery ('u003Cdiv style=";text-align:right;direction:rtl">u003C/div> ') .css ({maxwidth: parseint (jQuery (window) .WidTh () * .80) +' px '، maxheight: parseilt (jQuery (window) .height () * .80) +' px '، تجاوز الفائض: "Auto"}) .Appendto (DIV)؛ var img = jQuery ('u003Cimg> ') .attr ({' src ': url}) .Appendto (div2). تحميل (وظيفة () {div.dialog ({{{{{{{{{{modal': "العرض": "تلقائي"، إغلاق: وظيفة () {) div.remove ()؛}})؛})؛

Answer 15

اضطررت إلى إضافة هذا إلى أعلى ملف HTML الخاص بي: <!doctype html>. وبعد لم أكن بحاجة لتعيين position منشأه. هذا مع jQuery 3.2.1. في 1.7.1، لم تكن هناك حاجة.

Answer 16

هذه هي الطريقة التي قمت بحل المشكلة، أضفت هذه الوظيفة المفتوحة للحوار:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

هذا يفتح الآن الحوار في الجزء العلوي من الشاشة، بغض النظر عن المكان الذي يتم فيه تمرير الصفحة وفي جميع المتصفحات.

Answer 17

لوضع مربع الحوار في وسط الشاشة:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});

Answer 18

كان لدي نفس المشكلة، التي تم إصلاحها عندما أدخلت ارتفاعا للحوار:

$("#dialog").dialog({
    height: 500,
    width: 800
});

Answer 19

يجب عليك إضافة الإعلان

في الجزء العلوي من وثيقتك.

بدونها، يميل JQuery إلى وضع مربع الحوار في أسفل الصفحة والأخطاء قد يحدث عند محاولة سحبه.

Answer 20

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

يعمل هذا الحل ولكن فقط بسبب إصدارات مسرد الأحدث تتجاهل هذا تماما والعودة إلى الافتراضي، وهذا هو بالضبط هذا. لذلك يمكنك فقط إزالة الموضع: "Center" من خياراتك إذا كنت ترغب فقط في تركز المنبثقة.