Transparent overlay auf Jquery Seite

Hey, wie kann ich es so machen, dass es im Grunde nur eine semi-transparente Farbe für die gesamte Seite außer 1 div (das ist eine Nachricht)

Grundsätzlich laden der Seite im hintergrund abgedeckt wird mit semi-transparenten Schwärze, sondern ein bestimmtes div (message-box, in diesem Fall) bleibt normal.

Dank

InformationsquelleAutor Belgin Fish | 2010-07-08
  1. 10

    Könnten Sie versuchen, blockUI http://malsup.com/jquery/block/

    Die jQuery-BlockUI Plugin können Sie simulieren, synchrone Verhalten bei der Verwendung von AJAX, ohne dass die Verriegelung der browser[1]. Wenn aktiviert, wird verhindert, Benutzer-Aktivität, die mit der Seite (oder von teilen der Seite), bis es deaktiviert wird. BlockUI Elemente hinzufügt, den DOM, um ihm sowohl das Aussehen und Verhalten der Blockierung-Benutzer-Interaktion...

    [1] Mit der XMLHttpRequest Objekt in synchrone - Modus bewirkt, dass der gesamte browser zu sperren, bis der remote-Aufruf abgeschlossen ist. Dies ist normalerweise kein erwünschtes Verhalten.

    • Dies ist die perfekte Lösung für alle meine Probleme mit überlagerungen und Effekte. Danke.
    InformationsquelleAutor Matt Evanoff
  2. 2

    Etwas wie das hier tun:

    html

      <div id="lightbox_background"> 
    <div id="lightbox_container"> 
      <div id="lightbox_header"> 
        <span class="close"><a href="javascript:void(0);" onclick="activity_feed_close()">close</a> <a href="javascript:void(0);" onclick="activity_feed_close()"><img src="http://design.vitalbmx.com/images/x_button.gif" /></a></span> 
      </div> 
      <div id="lightbox_content"> 
        <p>Some text</p>
      </div> 
    </div> 
  </div>

    css

    <style type="text/css">
div#lightbox_background { 
    display:none; 
    position:fixed; 
    top:0; 
    left:0;
    height:100%; 
    width:100%; 
    background: transparent url(http://design.vitalbmx.com/images/transp_30.png) repeat; z-index:1100; 
} 
div#lightbox_container { 
    background: #f6f6f6 url(http://design.vitalbmx.com/images/lb_container_bg.gif) right top repeat-y; 
    margin:16px 32px; 
} 
div#lightbox_container div#lightbox_header { 
    padding:5px 5px 0; text-align:right; 
} 
div#lightbox_container div#lightbox_content { 
    width:100%; 
    min-height:500px; 
}
</style>​
    InformationsquelleAutor mvbl fst
  3. 0

    Fancybox tut dies. Wenn es bereits tut, was Sie wollen - nutzen Sie es. Wenn nicht, gehen Sie bitte zuerst in die Quelle und sehen Sie, wie es ist, es zu tun.

    http://fancybox.net/

    InformationsquelleAutor Jamie Wong
Schreibe einen Kommentar