Gå til innhold

Lage et layer som er gjennomsiktig men ikke slipper igjennom museklikk

HDSoftware

Anbefalte innlegg

HDSoftware

HDSoftware

Skrevet
Skrevet

Heisan alle eksperter

Jeg har laget en WEB side, eller mere nøyaktig, en web applikasjon, der jeg viser en kalender. I denne kalenderen er det en rekke LENKER som peker på informasjon om elementene. Det jeg ønsker er å vise innholdet i en iframe som et nytt lag. Det har jeg forsåvidt fått til ved å slenge op en DIV og en iframe inne i DIV'en. Har også fått denne diven til å ta hele skjermen. Det jeg derimot ikke får til er å få denne DIV'en gjennomsiktig. Jeg vil at den skal vise brukeren hva som ligger originalt på web siden, men den skal forhindre brukeren å trykke på noe som helst annet en en LUKK knapp.

 

Ideer tas imot med takk...

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
emilkje

emilkje

Skrevet
Skrevet

Er det sånn du mener?

 

Layer Demo

 

Her har jeg brukt et PNG bilde som er halv gjennomsiktig for å tone ned det som er i bakgrunnen. Det fungerer helt fint med ett som er 100% gjennomsiktig. Layeren blir aktivisert gjennom javascript funksjonen toggleLayer().

 

Kode:

 

<!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>Untitled Document</title>
<style type="text/css">

body {
margin:0;
padding:0;
}

#layer {
background:transparent url(dark.png) top center repeat;
height:100%;
width:100%;
position:absolute;
display:block;
top:0;
left:0;
}

#notat {
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height:500px;
background:transparent url(dark.png) top center repeat;
padding:10px;
}
#notat a {
background-color:#fff;
padding:5px;
margin-top:5px;
margin-right:0;
float:right;
display:block;
color:#666;
font-family:Tahoma, Geneva, sans-serif;
font-size:80%;
text-decoration:none;
text-align:center;
width:50px;
border:solid #333 2px;
}

#notat a:hover {
color:#F60;
}

#notat a img {
border:none;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(){

if(document.getElementById("layer").style.display == "none") {
	document.getElementById("layer").style.display = "block";
}
else {
	document.getElementById("layer").style.display = "none";
}

}
/*]]>*/
</script>

</head>

<body>
<div id="layer">
<div id="notat"><iframe src="http://google.com" style="height:465px; width:100%;"></iframe>
	<a href="#" onclick="toggleLayer()">lukk</a>
</div>
</div>
<div id="tekst">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed justo quis libero hendrerit accumsan. Sed in quam. Donec ligula. Donec mi mauris, eleifend a, scelerisque nec, aliquet at, tellus. Etiam sed neque id libero pulvinar dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vel sapien vel diam interdum feugiat. Curabitur viverra. Suspendisse potenti. Phasellus ut nibh sit amet diam scelerisque gravida. Vestibulum turpis est, posuere eu, tincidunt eget, vehicula et, justo. Fusce eu nisi. Fusce consequat nibh eget augue.
en mollis accumsan. Integer rutrum nisi sed arcu.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam lectus purus, iaculis eu, consectetur ut, mollis nec, erat. Suspendisse at sem sit amet purus ornare lacinia. Cras magna eros, hendrerit at, blandit a, vestibulum eleifend, est. Nam pulvinar. Praesent gravida feugiat erat. Proin ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eget nibh quis augue tincidunt luctus. Suspendisse cursus molestie risus. Curabitur id elit a est fringilla malesuada. Phasellus nisl augue, posuere a, facilisis ultrices, mollis sit amet, est. Etiam at lacus elementum mi aliquam accumsan. Etiam auctor lobortis dui. 
</p>
<p> </p>
<h3><a href="#" onclick="toggleLayer()" title="Vis iframe">Vis iFrame</a></h3>
</div>
</body>
</html>

 

 

PNG bilde:

dark.png

 

Håper dette hjelper :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...