Keskustelu: Nettisivujen teko: CSS fade background

Nyt CSS-osaajat, apuuva :)

Tein "ikkunan" div:llä, joka on oletusarvoisesti piilossa (display:none) ja avautuu javascriptillä (div.style.display='block'). Nyt haluaisin ikkunan auetessa tummentaa taustan, jotta käyttäjän on "visuaalisesti helpompi käyttää auennutta ikkunaa." Muistaakseni http://www.telkku.com :ssa on tämän tapainen käytössä, kun avaa jonkin ohjelman tiedot esiin.

Riittääkö tähän pelkkä CSS kikkailu?

- AnttiK

Tässä: http://msmvps.com/blogs/omar/archive/2006/08/02/How-to-fade-background-and-show-a-dialog-box.aspx

Juuri tällainen, mutta en saa toimimaan firefoxissa :(

Itekkin tätä itelleni itsiskelin ja löysinkin toisen kans, mikä ainakin toimii

http://www.nofunc.com/Sexy_Box/

Mutta kuinka tossa saa kutsuttua jotain php sivua?

toi ei hirveesti lohduta kun pitäs tohon koko sivu rakentaa mitä haluu siihen. :S

Miten ton sais niin, että se lataa jonkun valmiiksi tehdyn php sivun tohon laatikkoon sit mikä aukee?

innerHTML=v+'<div class="div">Jee<\/div>';

Kappas, sainkin toimimaan :)

Jeh sama homma.. ja ilman tota karseeta javascript sköndee :D
Kiitoksia linkeistä..

Eipä se toiminutkaan aivan täydellisesti.. laatikko aukeaa ja tausta tummentuu, mutta myös auennut laatikko on läpinäkyvä, joten taustalla olevat elementit loistavat ikävästi läpi :( Keinoja tämän estämiseksi?

Hitsi, unohtu koodi aikaisemmasta viestistä :D

Eli jos joku tietää pikafixin, niin että laatikko ei näyttäisi alla olevia tekstejä yms. läpi.

<style type="text/css">

div#tummennus {
 	display:block;
    position: absolute;
    opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7;
    filter: alpha(opacity=40);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
 	background-color:#000;
    z-index: -1;
}
div#laatikko {
 	display:block;
 	position:fixed;
 	top:10em;
 	left:15em;
 	background-color:#fff;
 	width:450px;
    height: 250px;
    z-index: 1;
}
</style>

    <?php
    for ($i=0;$i<150;$i++) {
    echo "liirum laarum loorum ";
    }
    ?>

<div id="tummennus">
<div id="laatikko">
    palikka palikka
</div>
</div>

Laita #tummennus ja #laatikko erikseen, eihän niiden tarvitse olla sisäkkäin.

Ihan vain ettei tule pulaa erilaisista esimerkeistä, niin tässä tummentamisen toteuttamiseen hieman erilaista näkökulmaa: http://kontu.selfip.info/html.css.js/tummennus.html

HTML, CSS ja JavaScript ovat erillään toisistaan.

Tein myös vähän kokeiluja, harmi ettei esim. body:after -idea toimi ihan vain sen takia, ettei position: absolute; -määritys toimi. Tietty IE ei ymmärrä sen päälle mitään muutenkaan kun tuki CSS:n pseudoelementeille puuttuu.

innerHTML:stä sen verran, että sen huonoihin puoliin kuuluu yleensä koko elementin sisällön parsiminen uudelleen. Jos vaikka body-elementin loppuun lisää tavaraa innerHTML:n voimin, niin kaikki sivun sisältö joudutaan käsittelemään ja renderöimään uusiksi, pahimmillaan skriptit voivat hajoilla kun käytössä olevat elementit vedetään alta.