Wie bekomme ich ein Bild mit Bootstrap in den Vordergrund?

Question

Ich versuche ein Lade-GIF im Vordergrund des Benutzerbildschirms während einer Ajax-Anfrage zu setzen. Das Gif sollte sich in der Mitte der Webseite befinden, auch wenn der Benutzer nach unten oder oben scrollt. Gibt es eine Layout-Methode in Bootstrap, um dies zu realisieren?

Ich bin mir nicht sicher, wo diese Schnipsel HTML platzieren

<div id='loading' style='display: none'> 
    <img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/> 
</div> 

Answer 1

Sie es mit CSS tun. Erstellen Sie ein Overlay, das die Seite (Overlay) bedeckt, indem Sie z-index auf 9999 stellen, um sicherzustellen, dass es im Vordergrund ist. Um den Spinner in der Mitte des Bildschirms zu setzen, können Sie die Eigenschaften top und translate verwenden. Zum Beispiel:

CSS:

.loading-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
} 
.loading-overlay > .inner 
{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Die HTML-Markup wie folgt aussieht:

<div class="loading-overlay"><div class="inner"><img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/></div></div> 

Um einen transculent Hintergrund der Overlay hinzufügen, fügen Sie einfach background: rgba(0,0,0,0.85); zum .loading-overlay Klasse.

Viel Glück!

Answer 2

Sie können es überall platzieren, aber Sie müssen die div mit CSS zu halten es in der Mitte der Seite

Dies sollte für Sie gestalten, arbeiten:

#loading{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
}