Lớp phủ trong suốt và sự cố cuộn

Tôi cần trình tải cho một số trang có thời lượng tải dài.Lớp phủ trong suốt và sự cố cuộn

<div id="loader"> 
    <div id="loaderContent" > 
     <img src="/im/loader.gif" /> 
     <p>Traitement en cours...</p> 
    </div> 
</div>

CSS

#loader { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    background-color: #808080; 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    cursor: wait; 
} 

#loaderContent { 
    display: block; 
    position: fixed; 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    margin: 0 auto; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -55%); 
    text-align: center; 
    color:darkgreen; 
    background-color: white; 
    border: 2px solid green; 
    border-radius: 20px; 
    opacity: 1; 
    font-size: 22px; 
    font-style: italic; 
    font-weight: bold; 
    padding: 30px 30px 20px 30px; 
}

tôi kích hoạt và tắt nó với jQuery $("#loader").show() và $("#loader").hide(). Nhưng tôi có hai vấn đề: độ mờ của nội dung div không được tính đến (nó trong suốt ngay cả với opacity:1) và nếu tôi hiển thị nó trên một trang dài, người dùng có thể cuộn nội dung ...

Làm thế nào để sửa chữa nó?

Nguồn

2016-10-14 Anonymous

Opacity được thừa hưởng từ container phụ huynh và không thể được ghi đè.

Giá trị áp dụng cho toàn bộ phần tử, kể cả nội dung của nó, mặc dù giá trị không được thừa kế bởi các phần tử con. MDN Doc

Vì vậy, thích kênh alpha của màu nền:

background-color: rgba(125, 125, 125, 0.5);

Sau đó, đối với các di chuyển, bạn phải thiết lập các overflow tài sản của bạn body-hidden, nội dung sẽ được cắt bớt. Giá trị mặc định là visible cho phép cuộn. Xóa phần mềm khi bạn ẩn khung tải. Tôi lừa tôi thấy một lần là để áp dụng một lớp tùy chỉnh cho cơ thể:

body.loading { 
    overflow: hidden; 
}

Bạn có thể sử dụng lớp này để hiển thị/ẩn khung tải của bạn quá:

body.loading #loader { 
    display: block; 
}

Các giải pháp của hai vấn đề này là chứng minh trong đoạn này:

$(document).ready(function() { 
 
    function loaderShow() { 
 
    $("body").addClass("loading"); 
 
    }; 
 

 
    function loaderHide() { 
 
    $("body").removeClass("loading"); 
 
    }; 
 
    // Les clicks sur les éléments ayant la classe "loaderOnClick" affichent le loader 
 
    $('.loaderOnClick').click(function() { 
 
    loaderShow(); 
 
    }); 
 
});

p { 
 
    line-height: 25px; 
 
} 
 
#loader { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 9999; 
 
    background-color: rgba(125, 125, 125, 0.5); 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    cursor: wait; 
 
} 
 
#loaderContent { 
 
    display: block; 
 
    position: fixed; 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    margin: 0 auto; 
 
    top: 40%; 
 
    left: 50%; 
 
    transform: translate(-50%, -55%); 
 
    text-align: center; 
 
    color: darkgreen; 
 
    background-color: white; 
 
    border: 2px solid green; 
 
    border-radius: 20px; 
 
    font-size: 22px; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    padding: 30px 30px 20px 30px; 
 
} 
 
body.loading { 
 
    overflow: hidden; 
 
} 
 
body.loading #loader { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 
    <p>Tu ne quaesieris, scire nefas, quem mihi, quem tibi finem di dederint, Leuconoe, nec Babylonios temptaris numeros. ut melius, quidquid erit, pati. seu pluris hiemes seu tribuit Iuppiter ultimam, quae nunc oppositis debilitat pumicibus mare Tyrrhenum. 
 
    Sapias, vina liques et spatio brevi spem longam reseces. dum loquimur, fugerit invida aetas: carpe diem, quam minimum credula postero.</p> 
 

 

 
    <p class="loaderOnClick">Click me !</p> 
 

 
    <div id="loader"> 
 
    <div id="loaderContent"> 
 
     <img src="https://i.stack.imgur.com/ZXs15.gif" /> 
 
     <p>Traitement en cours...</p> 
 
    </div> 
 
    </div> 
 

 

 
</body>

Nguồn

2016-10-14 13:51:39

câu trả lời của bạn tốt hơn –

Ví dụ hay. Tôi tìm thấy css của bạn áp dụng một lần cho cơ thể và 'loaderShow()/loaderHide()' phương pháp của bạn thanh lịch. TY. –

sử dụng nền màu alpha thay vì opacity

#loader { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    background-color: rgba(120,120,120,0.5); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    cursor: wait; 
}

Nguồn

2016-10-14 13:51:25

Tôi upvoted câu trả lời của bạn như bạn là người đầu tiên (14s trước tôi) để trả lời vấn đề độ mờ đục. –

một css dọn dẹp nên làm các trick.

#loader { 
    display: none; 
    position: absolute; 
    background-color: #808080; 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    cursor: wait; 
    padding-top: 40%; 
} 

#loaderContent { 
    display: block; 
    position: relative; 
    width: 40%; 
    height: 20%; 
    margin: auto; 
    color: darkgreen; 
    background-color: white; 
    border: 2px solid green; 
    border-radius: 20px; 
} 

#loaderContent > img { 
    margin: 10% auto; 
    display: block; 
} 

#loaderContent > p { 
    font-size: 22px; 
    font-style: italic; 
    font-weight: bold; 
    text-align: center; 
    width: 100%; 
}

Bây giờ bạn có thể show() và hide() không có vấn đề. Nó vẫn cuộn, sau đó đặt thành phần cuối cùng trong số BODY và đặt width và height thành 100% trên phần tử body.

Nguồn

2016-10-17 13:20:43

Không, nó không giải quyết vấn đề độ mờ cũng như vấn đề di chuyển. –

Đối với vấn đề mờ, thay thế

background-color: #808080; 
opacity: 0.5;

với

background-color: rgba(128, 128, 128, 0.5);

Đối với vấn đề di chuyển, khi bạn thực hiện bộ nạp có thể nhìn thấy với jQuery, thêm cũng là một lớp trên cơ thể, .wrapper và thêm vào css:

body.wrapper { 
    overflow: hidden; 
}

Kết quả: https://jsfiddle.net/MadalinaTn/2g3jL54b/7/

Nguồn

2016-10-17 13:57:13

Không có gì hơn câu trả lời trước đó. Bạn chỉ cần sử dụng lại câu trả lời của người khác. –

@ user987456321 Khi tôi đăng bài này, tôi nhấp vào "Chạy đoạn mã" và tôi không thấy trong văn bản liên kết "Nhấp". Tôi đã không kiểm tra tất cả các mã và tôi giải quyết điều này trên jsfiddle. Đó là ok câu trả lời trước, tôi đồng ý, tôi đã có ý định tốt và tôi đã bỏ phiếu cho câu trả lời khác khi tôi nhận ra câu trả lời của tôi đến muộn một chút :). –

Lớp phủ trong suốt và sự cố cuộn

Trả lời

Các vấn đề liên quan