باستخدام jQuery لإنشاء تراكب ولكن يرث المحتوى عتامة CSS

Question

لقد قمت بإنشاء نوع من التراكب المشروط ثم محتوى مع التراكب .. التراكب المشروط لديه مجموعة التعتيم ويعمل ولكن محتوى التراكب لديه أيضا عتامة .. أعتقد أن ورثها ... لا أريد حقا لتطبيق فئة جديدة على المحتوى، هل هناك طريقة للقول فقط تنطبق على

هنا هو بلدي CSS

.modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000000;
    display: none;
}

و jquery لإنشاء النموذج والمحتوى

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES

$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);  /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay...  Its standard html

$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);

Answer 1

لا يتم تورث خاصية CSS "عتامة"، على الرغم من أنها قد تبدو كذلك.

منذ المحتوى داخل تراكب العتامة، في أحسن الأحوال، يكون ذلك من الوالد (تراكب). لذلك، إذا كان لدى الوالد عتامة 0.5 إذن، بصريا، لا يمكن لجميع أطفالها تحقيق هذه العتامة فقط (لا أعلى).

لتجنب ذلك، يجب أن تكون العناصر منفصلة في HTML. أعلم أنه من الألم وأعتقد أن CSS يجب أن يكون لديك بالفعل طريقة للتعامل مع هذا ولكن لسوء الحظ لا.

طريقة أخرى من شأنها أن تعمل مع العناصر المتداخلة هي نسيان خاصية العدواة واستخدام صورة PNG مع شفافية ألفا وتعيين ذلك كخلفية إلى التراكب.

Answer 2

إذا كنت أقرأ سؤالك الصحيح، فهذه مجرد نتيجة للطريقة التي تعمل بها العتامة الآن: لا ترث عناصر الأطفال العتامة كمجموعة هم يتم تطبيع التعتيم ضد الوالد، على غرار كيف يمكن أن يعمل الارتفاع / العرض. لذلك تعني قيمة "1" على الطفل "100٪ من 0.8". ليس هناك أيضا طريقة للحصول على 110٪ في حال كنت توجهت عقليا هناك.

الحلول اللازمة لهذا ليست جميلة، ولكن الطرق العملية هي التعامل مع هذا مع الأخوة الخلفية (حتى التعتيم هو الاهتمام بشيء آخر تماما) - ليس رائعا للدلالات، ولكن فعالة - أو الطريقة الثانية هي استخدام PNGS للقيام بشفافية، ولكن هذا يخضع لمشاكل IE القديمة.

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

Answer 3

js التالية التي كتبت على jquery 1.3:

$(document).ready(function() {
        $(document.body).prepend('<div class="modalOverLay"></div>');
        $('.modalOverLay').css({ opacity: 0.5, width: '100%', height: '100%' });
        $('#trigger').click(function() {
            $('.modalOverLay').fadeIn('slow');
            $('.contentBox').css({
                position: 'absolute',
                left: ($(document).width() - $('.contentBox').width()) / 2,
                top: ($(document).height() - $('.contentBox').height()) / 2
            });
            $('.contentBox').fadeIn(500);

        });
    });

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

<a href="#" id="trigger">Trigger Modal pop up</a>
<div class="contentBox">
    <p>I am on overlay but don't have the same opacity</p>
</div>

وبهذه الطريقة لن يكون المحتوى الخاص بك نفس العتامة مثل تراكب ومقاعدك مشروط في منتصف ما ننظر إليه في بعض الأحيان كثيرا !! :)

Answer 4

يجب ألا تكون المحتوى جزءا من التراكب. التراكب موجود لمنع الوصول إلى المحتوى العادي، وليس لإيواء محتوى مشروط.

بدلا من إلحاق المحتوى الخاص بك إلى DIV Overlay، قم بإلحاقه به الوالد وأسلوبه حتى يظهر من أين تريد ذلك.

أيضا، jQuery ui لديه حوار القطعة التي يمكن استخدامها لنظام التشغيل.

Answer 5

نشر لطيف. لقد كنت أفكر في هذا الوقت الطويل لركوب وظيفة تنبيه Sexy Mootls. يعمل ALI's Post بشكل مثالي ولكني يجب علي إضافة خاصية مؤشر Teh Z إلى الظهور على التراكب. فقط ZINDEX أقل للمشاركة في السطوع و higner zindex لحف بلدي عملت. شكرا.