Søg
Avatar billede Slettet bruger
11. april 2004 - 19:44 Der er 16 kommentarer og
1 løsning

drop shadow på vindue åbnet med window.createPopup()

Hej!

Jeg har et vindue jeg åbner med window.createPopup()

Det vil jeg gerne have en drop shadow på, så det minder lidt om skyggen på menuer i Windows XP.

Men men...jeg kan godt lave det manuelt på nogle lag, men når jeg bruger window.createPopup() kan det ikke ses.

Jeg ved godt at det er IE only og det har jeg det fint med.

Herunder er de 2 eksempler, et hvor det virker og et hvor det ikke gør:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style type="text/css">
<!--
.shadow {
padding-right:10px;
filter: DropShadow(Color=aeaeae, OffX=5, OffY=5, Positive=1);

height: 60px;
}
-->
</style>
</head>

<body bgcolor="#008000">

<script>

function ShowPopup()
{
    oPopup = window.createPopup();
    var oPopupBody = oPopup.document.body;
    oPopupBody.style.backgroundColor = "#FFFFFF";
    oPopupBody.style.padding = "5px";
    oPopupBody.innerHTML = "<div class='shadow'><div style='border:1px solid gray'><div onclick=parent.HidePopup() style='background:white;cursor:default;padding-top:1px;padding-left:17px;padding-bottom:3px' onmouseover=this.style.background='#316AC5';this.style.color='#FFF' onmouseout=this.style.background='#FFF';this.style.color='#000'>Sorter undersider</div><div onclick=parent.HidePopup() style='background:white;cursor:default;padding-top:1px;padding-left:17px;padding-bottom:3px' onmouseover=this.style.background='#316AC5';this.style.color='#FFF' onmouseout=this.style.background='#FFF';this.style.color='#000'>Sorter undersider</div></div></div>";
    oPopup.show(event.clientX, event.clientY, 200, 57, document.body);
}
</script>

<div onclick="ShowPopup()">Klik mig</div>
<br>
<br>
<br>
<br>

<div class="shadow"><div style="border:1px solid gray"><div style='background:white;cursor:default;padding-top:1px;padding-left:17px;padding-bottom:3px' onmouseover=this.style.background='#316AC5';this.style.color='#FFF' onmouseout=this.style.background='#FFF';this.style.color='#000'>Sorter undersider</div><div style='background:white;cursor:default;padding-top:1px;padding-left:17px;padding-bottom:3px' onmouseover=this.style.background='#316AC5';this.style.color='#FFF' onmouseout=this.style.background='#FFF';this.style.color='#000'>Sorter undersider</div></div></div>

</body>
</html>
Avatar billede roenving Novice
11. april 2004 - 19:53 #1
Aner ikke om det virker på den måde med popup-objekter, men normalt arves css ikke til andre window-objekter, så måske:

function ShowPopup()
{
    oPopup = window.createPopup();
    var oPopupBody = oPopup.document.body;
    oPopupBody.style.backgroundColor = "#FFFFFF";
    oPopupBody.style.padding = "5px";
    oPopupBody.innerHTML = "<style type='text/css'><!--.shadow {padding-right:10px;filter: DropShadow(Color=aeaeae, OffX=5, OffY=5, Positive=1);height: 60px;}--></style>"
    oPopupBody.innerHTML += "<div class='shadow'> ... osv.
Avatar billede Slettet bruger
11. april 2004 - 20:13 #2
Nej, no luck.

Den tager slet ikke CSS'en med over. Selvom jeg laver det inline vil den ikke tage filter med, jeg kan godt skifte baggrundsfarve osv, men ikke lave skyggen.
Avatar billede roenving Novice
11. april 2004 - 20:16 #3
Accepterede den slet ikke style inde i popup'en ?-)
Avatar billede Slettet bruger
11. april 2004 - 20:39 #4
Nej ikke det mindste...
Avatar billede roenving Novice
11. april 2004 - 21:12 #5
Hvad med så:

function ShowPopup()
{
    oPopup = window.createPopup();
    txt = "<html><head><style type='text/css'><!--.shadow {padding-right:10px;filter: DropShadow(Color=aeaeae, OffX=5, OffY=5, Positive=1);height: 60px;}--></style></head><body style='background:#fff;padding:5px;'>";
    txt += "<div class='shadow'> ... osv.

    txt += "</body></html>"
    oPopup.document.open();
    oPopup.document.write(txt);
    oPopup.document.close();
Avatar billede Slettet bruger
11. april 2004 - 22:51 #6
Desværre heller ikke nej.

MS har nok udtænkt en snedig metode, men jeg vælger at sige at det så er ligemeget. Det betyder ikke det helt vilde med den skygge, syntes bare det kunne se fikst ud ;)

Måske som et baggrundsbillede?
Avatar billede roenving Novice
11. april 2004 - 23:04 #7
Ja, hvorfor ikke !-)
Avatar billede Slettet bruger
12. april 2004 - 00:54 #8
Har nu prøvet, og kom i tanke om IE's problemer med PNG. Øv bøv :(
Avatar billede olebole Juniormester
16. april 2004 - 00:21 #9
<ole>

Man kan godt få en skygge med over i et popUp-objekt, men det gør ingen nytte, da popUp-objektet ikke er (eller kan gøres) transparent.
Du kunne dog lave et lag og lægge det under popUp'en - men det fjerner jo hele meningen med at bruge et popUp-objekt.

Jeg er bange for, du bliver nødt til at finde dig i, det ser ud, som det gør  :)

/mvh
</bole>
Avatar billede Slettet bruger
16. april 2004 - 09:15 #10
hehe...det tror jeg desværre også, og helt ærligt er det da også ligemeget. Men det kunne nu være skægt :)

Jeg prøvede det med at lægge et lag under popup'en, og det virkede faktisk. Altså indtil jeg så skidtet i Explorer. Så så det ikke lige så smart ud :/
Avatar billede Slettet bruger
15. maj 2004 - 15:57 #11
jeg finder mig i at det ser ud som det gør :)
Avatar billede olebole Juniormester
15. maj 2004 - 16:45 #12
Du kan nu godt lade sig gøre. Prøv dette helt simple eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    margin: 0px;
}
#skygge {
    position: absolute;
    width: 150px;
    height: 30px;
    top: 102px;
    left: 102px;
    background-color: black;
    filter: Alpha(opacity=20);
    visibility: hidden;
    z-index: 1000;
}
</style>
<script type="text/JavaScript">
var shadeTimer, shade;
var oPopup = window.createPopup();
function pop() {
    shade = document.getElementById("skygge");
    clearInterval(shadeTimer);
    oPopup.document.body.innerHTML = "Darvs, el_barto  :)";
    oPopup.document.body.style.border = "1px solid black";
    oPopup.document.body.style.margin = "4px 8px";
    oPopup.show( 100, 100, 150, 30, document.body );
    shade.style.visibility = "visible";
    shadeTimer = setInterval("checkOpen()", 50);
}
function checkOpen() {
    if (oPopup.isOpen) return;
    clearInterval(shadeTimer);
    shade.style.visibility = "hidden";
}
</script>
</head>
<body>

<button onclick="pop()">Pop</button>

<div id="skygge">&nbsp;</div>

</body>
</html>

--------------------------
Så kan du evt. sætte placering på skyggen udfra, hvor popUp'en skal placeres, hvis det ændrer sig.
Håber, du kan bruge det  :)
/mvh
Avatar billede Slettet bruger
15. maj 2004 - 17:33 #13
Det ser meget spændende ud, og jeg har da også lige testet det. Men det er lidt tricky, da popup'en placeres alt efter event.clientX og event.clientY.

Tror det er for meget bøvl for en dum skygge, men på den anden side er det jo finishen der sælger ;)
Avatar billede olebole Juniormester
15. maj 2004 - 17:43 #14
shade.style.top = dinX;
shade.style.left = dinY;
shade.style.visibility = "visible";

... hvor svært kan det være  ;o)
Avatar billede olebole Juniormester
15. maj 2004 - 17:44 #15
*LoooL* .... svært nok, åbenbart  :D

shade.style.top = dinX + 2;
shade.style.left = dinY + 2;
shade.style.visibility = "visible";
Avatar billede Slettet bruger
15. maj 2004 - 18:04 #16
Det var jo nemt nok, men jeg kom i tanke om at min popup strækker sig over 1-2 frames (iframes) så skyggen desværre bliver skåret midt over :(
Avatar billede olebole Juniormester
15. maj 2004 - 18:32 #17
Ja, så bliver det noget bøvl. Det _kan_ gøres, men det har vist kun akademisk interesse  :)
Det var sådan noget, jeg tænkte på, da jeg skrev: "Du kunne dog lave et lag og lægge det under popUp'en - men det fjerner jo hele meningen med at bruge et popUp-objekt." i (16/04-2004 00:21:07)  ;o)
/mvh
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 21:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
24/0811:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
24/0811:16 problem med mailbesked Af Pestilensen i Excel
White papers
Flere white papers »