以下のコンテンツをぼかしている間に、ページ上の任意の要素にloader-divを追加してください。

ウェブサイト上の任意の要素に追加できるオーバーレイを作成しようとしています。これらは私が現在使用してCSS-クラスです：以下のコンテンツをぼかしている間に、ページ上の任意の要素にloader-divを追加してください。

.load-overlay { 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: absolute; 
    -khtml-opacity: 0.1; 
    opacity: 0.1;*/ 
    background: rgba(0, 0, 0, 0.05); 
    min-height: 180px; 
} 

.load-spinner { 
    border: 16px solid lightgrey; 
    border-top: 16px solid #ff7d00; 
    border-radius: 50%; 
    width: 80px; 
    height: 80px; 
    animation: spin 2s linear infinite; 
    top: 50%; 
    left: 50%; 
    margin: auto; 
    position: absolute; 
    margin-left: -40px; 
    margin-top: -40px; 
} 

.load-text { 
    text-align: center; 
    top: 50%; 
    position: absolute; 
    margin-top: 70px; 
    width: 100%; 
    font-size: 22px; 
    font-weight: bold; 
    color: #ff7d00; 
    color: #999; 
    font-weight: bold; 
    font-size: 18px; 
    font-style: italic; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

私は（活字体を使用して）このようにjQueryをextendend欲しいものを達成するために：私は今やってみたかった

$.fn.addLoader = function (loadText: string): JQuery { 
    const overlayDiv = $("<div class=\"load-overlay\"></div>"); 
    const spinnerDiv = $("<div class=\"load-spinner\"></div>"); 
    overlayDiv.append(spinnerDiv); 

    if (loadText) { 
     const textDiv = $("<div class=\"load-text\">" + loadText + "</div>"); 
     overlayDiv.append(textDiv); 
    } 

    overlayDiv.appendTo(this.css("position", "relative")); 

    return this; 
}

何され、作りますローダーの下のコンテンツがぼやけて見えます。これを実現するために、私はaddLoader関数にthis.css("filter", "blur(5px));を追加しました。しかし、今やローダー自体もぼやけていますが、これははっきりと判読可能でなければなりません。

私はそれが何らかの形で位置（絶対/相対）に関係すると思いますが、私はそれを見ません。

出典

2017-07-27 KingKerosin

あなたはオーバーレイを分離し、コンテンツをオーバーレイする必要があります。オーバーレイコンテンツのZインデックスが高く、非bluredのすべてがオーバーレイコンテンツdivに追加される必要があります。それはオーバーレイdivに含まれるすべてをぼかすので、 –

の理由は、あなたがスピナー.load-overlayの子を作る.load-spinner要素、上.append()方法を使用しています。

代わりに、フィルタオーバーレイを追加したの後に<body>要素にロードスピナーを追加する必要があります。

したがって：

$.fn.addLoader = function (loadText: string): JQuery { // prepare divs as constants const overlayDiv = $("<div class=\"load-overlay\" />"); const spinnerDiv = $("<div class=\"load-spinner\" />); // Note here, you can self-close elements created by JQuery if they're empty. //overlayDiv.append(spinnerDiv); // I've removed this from here as you don't need to append the spinner to the overlay. if (loadText) { const textDiv = $("<div class=\"load-text\">" + loadText + "</div>"); overlayDiv.append(textDiv); } // once this is all done, you then append the spinner to the body (or the parent container, whichever is preferable) $('body').append(spinnerDiv); overlayDiv.appendTo(this.css("position", "relative")); return this;

}

出典

2017-07-27 12:15:32

答えをありがとう。残念ながら、それは動作していません。また、私はCSSとスタイリングでは良くないと言及する必要があります;） – KingKerosin

私は[ここ]（https://jsfiddle.net/ecLLyrm9/）を作成しました。ご覧のとおり、スピナーがフィルター付きのdivの子でない限り、効果は適用されません。 –

以下のコンテンツをぼかしている間に、ページ上の任意の要素にloader-divを追加してください。

答えて

関連する問題