Website blockieren bzw. ausgrauen

meste

meste

Erfahrenes Mitglied
Hallo allerseits,
ich möchte gerne ein PopUp-fenster anzeigen und während der Anzeige die Website im Hintergrund blockieren bzw. ausgrauen so wie hier im Forum wenn man sich abmelden möchte.

Danke und Lg
 
Ich vermute mal deine Frage ist, wie man sowas macht.

Zuerst brauchst du den ausgegrauten Bereich, man nimmt dazu ein DIV und setzt die Farbe z.B. als Grau und die Transparenz auch. Außerdem muss du das DIV als vorderstes Element kennzeichnen (CSS z-index):
HTML: 
<div id="divDisabledBackground"></div>
CSS: 
#divDisabledBackground
{
  z-index:99999;
  background: gray;
  opacity: 0.5;           /* muss man ausprobieren! */
}
Dann fehlt noch dein PopUp-Fenster, das auch ein DIV (habe ich jetzt angenommen) ist:
HTML: 
<div id="divMyPopup"></div>
CSS: 
#divMyPopup
{
  z-index:100000;
  /* ...was du willst... */
}
 
ComFreek hat gesagt.:
Außerdem muss du das DIV als vorderstes Element kennzeichnen (CSS z-index):

CSS: 
#divDisabledBackground
{
  z-index:99999;
  background: gray;
  opacity: 0.5;           /* muss man ausprobieren! */
}

CSS: 
#divMyPopup
{
  z-index:100000;
  /* ...was du willst... */
}
Zum Vergrößern anklicken....
z-index zeigt ohne jegliche Angabe zur Positionsart position keinerlei Wirkung.

Hier kennt sich jemand gewiß nicht am Besten in Web-Sprachen aus, wie in seiner Signatur vollmundig propagiert :rolleyes:
 
@ComFreek
Hat leider nicht geklappt. Der Background ist zwar grau aber nicht disabled.


@spicelab
Was wäre dein Vorshlag?



Lg
 
@spicelab:
Sorry, beim Hintergrund habe ich eben die Position vergessen und left, top.
Beim zweiten schrieb ich ja "/*...was du willst...*/", das war auch hinsichtlich der Position gemeint. Ja hier gebe ich zu war nicht ganz so ausführlich...Hatte ich einfach so kurz hingeschrieben.

Übrigens sage ich nicht, dass ich mich am Besten auskenne, sogar von all meinen Kenntnissen von diesen (C++, Websprachen...).
Aber ich muss wirklich gestehen CSS war noch nie meine Stärke. Habs mal rausgenommen ;)

Und übrigens soll meine Signatur nicht als Werbung dienen :D
 
Zuletzt bearbeitet:
meste hat gesagt.:
@ComFreek
Hat leider nicht geklappt. Der Background ist zwar grau aber nicht disabled.


@spicelab
Was wäre dein Vorshlag?
Zum Vergrößern anklicken....

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>...</title>
        <style type="text/css">
            * {margin:0;padding:0;}
            html,body,#overlayDiv {height:100%;}    
            #overlayDiv {position:fixed;top:0;left:0;z-index:10;width:100%;background:#000;color:#fff;opacity:.8;}
            #overlayDiv p {display:none;}
            #pageDiv {position:relative;z-index:1;}   
        </style>
        <!--[if IE]>
        <style type="text/css">
            #overlayDiv {filter:alpha(opacity=80);}
        </style>
        <![endif]-->
    </head>
    <body> 
        <div id="overlayDiv">
            <p>overlayDiv</p>
        </div>
        <div id="pageDiv"> 
            <p>pageDiv dummy text</p>
            <p>pageDiv dummy text</p>
            <p>pageDiv dummy text</p>
        </div>
    </body>
</html>

Der darunter befindliche Text innerhalb #pageDiv ist "disabled", kann mit dem Mauszeiger nicht erreicht / markiert werden.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück