كيف يمكنني وضع مربع حوار jquery الخاص بي للتوسط؟

StackOverflow https://stackoverflow.com/questions/1839702

سؤال

لقد جربت تتبع التعليمات البرمجية، لكنه تقع حوار الوظائف فقط على وضع الزاوية العليا إلى المركز، وهذا يجعل العنصر المراد محاذاة إلى اليمين. كيف يمكنني تشغيل مربع الحوار إلى المركز الحقيقي الذي يحسب عرض العناصر، بحيث يقطع سطر المركز الحوار إلى 50٪ 50٪؟

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/ui/dialog#ent-position.

هل كانت مفيدة؟

المحلول

أنا متأكد من أنك لا يجب عليك تحديد موقع:

$("#dialog").dialog();

يجب أن مركز افتراضيا.

لقد ألقيت نظرة على المقال، وأيضا فحص ما يقوله موقع JQuery-UI الرسمي حول تحديد موقع حوار : وفي ذلك تمت مناقشته 2 ولايات: تهيئة وبعد تهيئة.

أمثلة كود - (مأخوذة من JQuery UI 2009-12-03)

تهيئة مربع حوار مع خيار الموضع المحدد.

$('.selector').dialog({ position: 'top' });

الحصول على أو تعيين خيار الموقف، بعد INIT.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

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

نصائح أخرى

أحدث JQuery Ui لديه مكون الوظيفة:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

الوثيقة: http://jqueryui.com/demos/position/
احصل على: http://jqueryui.com/download.

لأن مربع الحوار يحتاج إلى موقف، تحتاج إلى تضمين موقف JS

<script src="jquery.ui.position.js"></script>

لذلك إذا كان أي شخص يضرب هذه الصفحة مثل فعلت، أو عندما أنسى في 15 دقيقة، فأنا أستخدم إصدار الحوار Jqueryui 1.10.1 و JQuery 1.9.1 مع IE8 في IFRAME (BLAH)، ويحتاج إلى ضمن محدد أو لا يعمل، أي

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

بفضل @ VM370 لأشيرني في الاتجاه الصحيح.

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

لإصلاح موقف المركز، أستخدم:

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

جرب هذا....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

أحصل على أفضل النتائج لوضع مربع حوار JQuery في مركز نافذة المتصفح مع:

position: { my: "center bottom", at: "center center", of: window },

ربما هناك طريقة أكثر دقة لوضعها مع الخيار "استخدام"كما هو موضح في الوثائق في http://api.jqueryui.com/position/ لكنني في عجلة من امرنا ...

لا بد لي من الاتصال وظيفة dialog() مرتين لوضع مربع الحوار (jquery v1.11.2 / jqueryui v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

تعمل معلمة الموضع التالية لي

position: { my: "right bottom", at: "center center", of: window },

حظ سعيد!

Jquery UI 1.9.2, ، jQuery والإصدارات اللاحقة لا تدعم IE8

لقد وجدت حلولين لذلك.

  1. التراجع إلى jquery UI 1.7.2 لدعم IE8،

  2. جرب هذا الرمز Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

وفقا للمناقشة التالية، يمكن أن تكون المشكلة بسبب أقل التوافق في إصدارات المستقات الأحدث، والرجوع إلى العودة إلى 1.7.2 يبدو أن حل المشكلة، والتي تحدث فقط في IE8.http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8.

شيء آخر يمكن أن يوفر لك الجحيم مع وضع مربع حوار JQuery، خاصة بالنسبة للوثائق أكبر من منفذ عرض المستعرض - يجب عليك إضافة الإعلان

<!DOCTYPE html>

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

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

إذا كنت تستخدم ملفات مستقبل فردية أو تنزيل مسج مخصص في كلتا الحالتين تأكد من إضافته أيضا jquery.ui.position.js إلى صفحتك.

هل تجري هذا في IE فقط؟ إذا كان الأمر كذلك، فحاول إضافة هذا إلى السطر الأول من علامة رأس صفحتك:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

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

جرب هذا للإصدارات القديمة والشخص الذي لا يريد استخدام الموقف:

$("#dialog-div-id").dialog({position: ['center', 'top'],....

تحتاج أيضا إلى إجراء إعادة التركيز اليدوي إذا كنت تستخدم JQuery Ui على الأجهزة المحمولة - يتم وضع مربع الحوار يدويا عبر خاصية "اليسار والأعلى" CSS. إذا كان المستخدم مفاتيح التوجيه، فلن تركز وضع المواقع، ويجب تكييفها / إعادة التركيز بعد ذلك.

بالنسبة للبيئة Win7 / IE9 مجموعة فقط في ملف CSS الخاص بك:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

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

في كل مكان حيث كنت قد استخدمت dialog كنت قد أهتم ذلك بخيار الموقف التالي:

$.dialog({
    position: "center"
});

ومع ذلك، وجدت أن إزالة position: "center" أو استبداله بالبناء الصحيح لم يفعل الخدعة، على سبيل المثال:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

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

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

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

اضطررت ليحل محل كل مثيلات هذا مع بناء الجملة الصحيح الجديد أدناه:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

أنا ثابت مع CSS: 

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

لا يمكن الحصول على IE9 لوضع مربع الحوار.

تم إصلاحه عن طريق إضافة هذا إلى CSS:

.ui-dialog {
    left:1%;
    right:1%;
}

في المئة لا يهم. أي عدد صغير عملت.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top