موقع Bootstrap الرسمي التنزيل: http://v3.bootcss.com/
اليوم سوف أشارك مشكلة مواجهة في استخدام إطار bootstrap. تم استخدام عدد كبير من النوافذ المنبثقة (وسيط) أثناء تطوير المنتج.
عندما بدأت في تعلم استخدامه لأول مرة ، وجدت أن هذه النافذة لا يمكن تركيزها رأسياً ، وأعلى دائمًا ، ولا يمكن سحبها. بعد النظر في التعليمات الخاصة بالاستخدام ، لم أقم بتقديم الكثير من إعدادات وأساليب السمات ، لذلك استخدمت الطريقة الافتراضية. في الآونة الأخيرة ، قدم العميل طلبًا: هل يمكن توسيط النافذة المنبثقة؟ نظرًا لأن بعض النوافذ الصغيرة موجودة في الجانب العلوي ، فإن الصفحة الكلية غير متوازنة ، وما زالت الناتج الأكبر مقبولة.
لأنني لم أكن معتادًا جدًا على Bootstrap من قبل ، بدأت Baidu و Google ووجدت أنه لم يكن هناك سوى عدد قليل من الحلول ، على النحو التالي:
$ ("#mymodal"). modal ().العنوان المرجع:
جربت هذه الطريقة بنفسي ، لكنها لم تركز بالكامل. إذا كان حجم النافذة مختلفًا ، فسيتغير قيمة أعلى الهامش المعروضة في كل مرة ، وستكون هناك أشرطة تمرير على طبقة الغلاف ، وهي ليست جيدة المظهر.
لقد جربت أيضًا عدة طرق لتغييرها ، لكنها لم تكن متفائلة. لقد وجدت أنه لا يمكنني الحصول على قيمة $ (هذا). height () قبل ظهور النافذة. اعتقدت أنني كنت أستخدم ($ (window). Height ()-$ (this). Height ())/2 ، لكنني وجدت أنه لا يزال غير ممكن.
أخيرًا ، لا يمكنني سوى دراسة الكود المصدري وأجد أنه يمكن إضافة الكود التالي بعد 900 سطر من ملف bootstrap.js لتحقيق التركيز الرأسي.
هذا. $ element.children (). Eq (0) .css ("الموضع" ، "المطلق"). (that. $ element.width () - that. $ element.Children (). Eq (0) .WIDTH ()) / 2 + "px" ؛}}) ؛رمز الصفحة كما يلي:
<div> <button data-toggle = "modal" target = "#mymodal"> تشغيل العرض التجريبي </button> <!-modal-> <div id = "mymodal" tabIndex = "-1" al "rod =" div "div ' aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> العنوان المشروط </h4> </viv> <viv> ... </viv> <viv> <button type = "button" data-dismiss = "modal"> close </button type = "/" حفظ التغييرات </div>! /.
العروض كما يلي:
ما ورد أعلاه هو رمز المثال للتوسيط الرأسي لمربع المعيار (Modal) الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!