مسج - كيف يمكنني وضع DIV على تراكب؟

Question

أحاول إجراء مربع حوار مشروط بأقل قدر من كود مسجا قدر الإمكان لأن مشروعي يحتوي بالفعل على الكثير من المسج الخاص بك.

لذلك، كنت بحاجة أولا إلى تراكب، يتحقق مع:

$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');

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

$('body').append('<div id="test">My Test</div>');
$('#test')
.css('opacity','1.0')
.css('position','fixed')
.css('color','#000')
.css('z-index','2000')
.css('height','300px')
.css('width','300px')
.css('top','50%')
.css('left','50%');

ومع ذلك، عندما أفعل هذا، في نهاية المطاف مع خافتة # أخطأت، عندما لا أريد أن تكون باهتة - فقط الأشياء وراء ذلك. ما هي خدعة؟

Answer 1

انظر هذا بسرعة التجريبي هنا، يكمن المفتاح على الوضع المطلق على رأس الخلفية المعتادة. يضيف العرض التوضيحي ديناميكيا تراكب الخلفية DIV و MODAL DIV إلى الجسم ولكن يمكنك تحديد هذه الموجودة في HTML وتوضحها فقط.

متفق عليها ليست هناك حاجة لاستخدام البرنامج المساعد لتأثير مشروط، ومعظم الإضافات تأتي مع الكثير من الخيارات وبالتالي The Bloat التي لا تريدها إذا كنت بحاجة فقط إلى أبسط تأثيرات. - ملاحظة يمكننا القيام بذلك في سطرين بدلا من 3 - وبدون مساعد !!

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

Answer 2

أعتقد أنه قد يكون الحل الأفضل لديك لاستخدام مسافة جائق. رمى بحث Google السريع هذا: http://www.ericmmartin.com/simplemodal/ الذي يفعل ما تحتاجه في ثلاثة خطوط!

إذا كنت تريد بعض أكثر، هناك الكثير من الأحمال على jQuery تراكب صفحة البرنامج المساعد

من مظهرها، فإن CSS هو المفتاح للحصول على الأمور الصحيحة، وعلى معظم هذه الأمثلة يجب أن تأتي مع CSS التجريبي لكي تتكيف.

من الواضح أن هذا يجلب رمز مسج خارجي أكثر قلقا بشأنه - لكنني أقترح أن يوفر لك برنامج تشغيل مكتوب ومستقر جيدا لك الكثير من العمل / الوقت / خطوط التعليمات البرمجية!