الأشخاص الذين استخدموا المكون المشروط bootstrap مرتبكون. لماذا لا يمكن التركيز على مربع منبثق جيد؟ صادفت أن أعمل على مشروع EIT. نظرًا لأن بعض الأطر في هذا المشروع تتبع بعض قواعد NTTDATA ، فقد استخدمت bootstrap. لقد واجهت هذا الشيء لأول مرة وشعرت أنه كان متضاربًا للغاية واعتقدت أنه لم يكن جيدًا ، لكن عندما استخدمته ، شعرت أنه لا يختلف عن الصناديق المنبثقة الأخرى. أقل هراء ، وصلت إلى هذه النقطة ، ومشكلة التركيز الرأسي لصندوق bootstrap المنبثق هو أن نمط المربع المنبثق الذي حصلت عليه لا يركز بشكل رأسي ، ولكن أعلى 10 ٪ ، ولكن الصفحة مثيرة للاشمئزاز للغاية.
الحل كما يلي:
1. في CSS ، تجد
.modal.fade.in {TOP: 10 ٪ ؛}إذا قمت بتعديل هذا النمط ، فسيكون الأمر جيدًا. نظرًا لأن CSS عالمية ، يمكنك أيضًا تحديد موضع (الارتفاع) لمشرطة معينة في الصفحة. الطريقة كما يلي:
<style>#mymodal-help {top: 300px ؛} </style>#mymodal-help هو المعرف المشروط ، وبالتالي فإن الإعداد على ما يرام.
2. في JS ،
أنا أستخدم bootstrap-modal.js (إذا كنت أستخدم bootstrap.js أو bootstrap.min.js ، فلا بأس أيضًا ، لكنني بحاجة إلى العثور على الموقع المقابل).
موجود في JS (الأحمر هو الطريقة التي أضفتها):
var left = ($ (document.body) .width () - that. $ element.width ()) / 2 ؛ var top = ($ (document.body) .height () - that. $ element.height ()) / 2 ؛ var scrolly = document.documentElement.scrolltop || document.body.scrolltop ؛ // scrollbar solution var top = (window.screen.height /4) + scrolly - 120 ؛ // scrollbar solution console.log (يسار) ؛ هذا. $ element .addclass ('in') .Attr ('aria-hidden' ، false) .css ({left: left ، top: top ، margin: "0 auto"}) ؛ that.enforcefocus ()بمجرد العثور عليها ، أضف اللون الأحمر وسيكون على ما يرام ، بحيث يتم توسيط جميع الصناديق المنبثقة رأسياً.
ما سبق هو التفسير التفصيلي لمشكلة وحل التركيز العمودي لصندوق bootstrap المنبثق (Modal) الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!