Avatar billede axboeg Nybegynder
22. november 2008 - 12:14 Der er 7 kommentarer og
1 løsning

CSS - Opacity på popup DIV

Jeg sidder og roder med en pop op DIV der skal vise et tekst felt og en submit button hvor selve hovedsiden bliver faded i baggrunden. Problemmet er at Opacity går igen på efterfølgende DIVs og en solid farve/baggrund - hvad gør jeg galt?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyPage</title>
<style type="text/css">
<!--
#main {
}
#overlay {
    background-color: #FFFFFF;
    align:center;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0;
    left: 0;
}
#overlay #overlayContent {
    filter: Alpha(Opacity=100);
    opacity: 1.0;
    position: absolute;
    height: 100px;
    width: 300px;
    left: 50%;
    width:300px;
    margin-left: -150px;
    margin-top:50px;
    background-color: #DDDDDD;
    background-image: none;
}
-->
</style>
</head>

<body>
<div id="main">
  <h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
  <p>&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,  sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;</p>
  suscipit laboriosam, nisi ut aliquid ex ea commodi  consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit  esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo  voluptas nulla pariatur?&quot;</p>
<p>&nbsp;</p></div>
<div id="overlay">
    <div id="overlayContent"><p>Opret mappe:</p><p><input name="inpCreateFolder" type="text" /><input name="bntCreateFolder" type="button" value="Opret" /></p>
    </div>
</div>
</body>
</html>

Skal jeg gå i en helt anden retning?

Vh
Brian
Avatar billede w13 Novice
22. november 2008 - 12:38 #1
Så problemet er, at du fader en div, men alt inde i den div bliver også fadet? Det er i hvert fald bare sådan, fading fungerer. Det bliver også lagt på alle child-elementer.

Ellers skal man lave et "falsk" div-element bag ved, som indeholder baggrunden, og i virkeligheden er den, som man fader.
Avatar billede axboeg Nybegynder
23. november 2008 - 11:55 #2
Hmm .. det jeg faktisk prøver på er at lave er som på Synology fede backend:
http://www.axboeg.dk/syn.jpg

Bruger de mon Iframes istedet for Opacity?
Avatar billede jesper-moeller Nybegynder
23. november 2008 - 12:26 #3
Måske du kan bruge dette script

http://prototype-window.xilinus.com/index.html
Avatar billede axboeg Nybegynder
23. november 2008 - 14:31 #4
Hej Jesper,

tak for linket - det ser fedt ud. Dog et stort library for noget som burde være simpelt at lave. Jeg mener - jeg behøver ikke fades eller max/minimize windows etc. bare at kunne gøre baggrunden lidt blurret at se på og hertil vise et indtastningsfelt og derefter returnere til "hovedsiden".
Man ser det mere og mere rundt omkring, men det er åbenbart ikke så nemt som først antaget.
Avatar billede jesper-moeller Nybegynder
23. november 2008 - 14:50 #5
Du kan finde en hel stribe af scripts her

http://www.fortysomething.ca/mt/etc/archives/005400.php

nogen af dem er kun til billeder .. men en del kan mere
Avatar billede axboeg Nybegynder
23. november 2008 - 17:04 #6
w13, du ledte mig faktisk i den rigtige retning og jeg har nu fundet en løsning.

Svar og du får dine point.
Avatar billede w13 Novice
23. november 2008 - 19:14 #7
:)
Avatar billede axboeg Nybegynder
23. november 2008 - 21:43 #8
:)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester