Avatar billede exp Juniormester
07. juni 2004 - 11:51 Der er 16 kommentarer og
1 løsning

Tilpasse et info-boks popup-script

Med udgangspunkt i:

<html>
<head>
<style type="text/css">
#myAlert {
    position: absolute;
    font-family: "ms sans serif", sans-serif;
    font-size: 11px;
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    padding: 15px 25px;
    text-align: center;
    z-index: 100;
    visibility: hidden;
}
button {
    width:70px;
}
</style>
<script type="text/JavaScript">
var d=document;
function showAlert() {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}
</script>
</head>
<body>

<div id="myAlert">En hel masse tekst<br><br><button onclick="hideAlert()">OK</button></div>
<button onclick="showAlert();">Open</button>

</body>
</html>

hentet fra www.exp.dk/spm/297581

kunne jeg godt tænke mig at lave det, så funktionen virker på flere forskellige links.

Sagen er den, at jeg har en lang række link, hvor jeg ønsker en popup på hver enkelt, med hver deres tekst. Men ovenstående sætter jo desværre kun en tekst :-(


Nogen der har den gyldne kode, der kan få det til at virke uden at jeg skal lave:

function showAlert() {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}

for hver enkelt popup?
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:04 #1
function showAlert(stTekst) {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.innerHTML = stTekst
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}

IKKE TESTET!

Kald derefter funktionen med showAlert("Hejsa!")
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:08 #2
Dette er testet

<html>
<head>
<style type="text/css">
#myAlert {
    position: absolute;
    font-family: "ms sans serif", sans-serif;
    font-size: 11px;
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    padding: 15px 25px;
    text-align: center;
    z-index: 100;
    visibility: hidden;
}
button {
    width:70px;
}
</style>
<script type="text/JavaScript">
var d=document;
function showAlert(stTekst) {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.innerHTML = stTekst + a.innerHTML
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}

</script>
</head>
<body>

<div id="myAlert"><br><br><button onclick="hideAlert()">OK</button></div>
<button onclick="showAlert('Davs');" id=button1 name=button1>Open</button>
<br><br>
<button onclick="showAlert('Davs igen');" id=button2 name=button2>Open</button>
</body>
</html>
Avatar billede exp Juniormester
07. juni 2004 - 12:08 #3
Hvis du kigger ordentligt i den kode jeg har postet, så vil du opdage at funktionen showAlert gør en div synlig:

<div id="myAlert">En hel masse tekst<br><br><button onclick="hideAlert()">OK</button></div>
<button onclick="showAlert();">Open</button>

den hedder id="myAlert"

Men hvis jeg skal have det til at virke som det er nu, så skal jeg have:

function showAlert1() {
    var w,h, a = d.getElementById("myAlert1");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert1() {
    d.getElementById("myAlert1").style.visibility = "hidden";
}
function showAlert2() {
    var w,h, a = d.getElementById("myAlert2");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert2() {
    d.getElementById("myAlert2").style.visibility = "hidden";
}
function showAlert3() {
    var w,h, a = d.getElementById("myAlert3");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert3() {
    d.getElementById("myAlert3").style.visibility = "hidden";
}
function showAlert4() {
    var w,h, a = d.getElementById("myAlert4");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert4() {
    d.getElementById("myAlert4").style.visibility = "hidden";
}

osv osv osv...

og det er jo ikke helt optimalt...
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:13 #4
SORRY! Nu skulle den være der:

<html>
<head>
<style type="text/css">
#myAlert {
    position: absolute;
    font-family: "ms sans serif", sans-serif;
    font-size: 11px;
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    padding: 15px 25px;
    text-align: center;
    z-index: 100;
    visibility: hidden;
}
button {
    width:70px;
}
</style>
<script type="text/JavaScript">
var d=document;
var strAlertStart = "";
function showAlert(stTekst) {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
   
    if (strAlertStart == "") strAlertStart = a.innerHTML
    a.innerHTML = stTekst + strAlertStart
   
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}

</script>
</head>
<body>

<div id="myAlert"><br><br><button onclick="hideAlert()">OK</button></div>
<button onclick="showAlert('Davs');" id=button1 name=button1>Open</button>
<br><br>
<button onclick="showAlert('Davs igen');" id=button2 name=button2>Open</button>
</body>
</html>
Avatar billede exp Juniormester
07. juni 2004 - 12:13 #5
Hmm... måske det kan lave som:

function showAlert() {
    var w,h, a = d.getElementById("myAlert"+noget);
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert"+noget).style.visibility = "hidden";
}

Og så noget med at angive noget id i linket:


<div id="myAlert">En hel masse tekst<br><br><button onclick="hideAlert(1)">OK</button></div>
<button onclick="showAlert(1);">Open</button>

Kan man det?
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:16 #6
Ja, det har jeg set. Mit eksempel virker nu (endelig *ss*), med kun den én div.

Hvis du vil kalde den via <a href="java script:showAlert('Davs');">klik her</a>, og teksten skal være lang, så bliver det ikke så pænt.

Du kunne så lave et array med teksterne, og kalde funktionen med

showAlert(arrTekster[0]) osv.
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:20 #7
<script type="text/JavaScript">
var arrTekster = new Arrray();
arrTekster[0] = "Davs du";
arrTekster[1] = "Davs igen du";

var d=document;
var strAlertStart = "";
function showAlert(iArrIndex) {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
   
    if (strAlertStart == "") strAlertStart = a.innerHTML
    a.innerHTML = arrTekst[iArrIndex] + strAlertStart
   
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}

</script>

Så er der et array, og du kan nu kalde det med

showAlert(0) 
eller showAlert(1) osv.
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:22 #8
Nu er det så testet, og to fejl rettet (Jeg har vist lidt for travlt i dag)

<script type="text/JavaScript">
var arrTekster = new Array();
arrTekster[0] = "Davs du";
arrTekster[1] = "Davs igen du";

var d=document;
var strAlertStart = "";
function showAlert(iArrIndex) {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
   
    if (strAlertStart == "") strAlertStart = a.innerHTML
    a.innerHTML = arrTekster[iArrIndex] + strAlertStart
   
    a.style.visibility = "visible";
}
function hideAlert() {
    d.getElementById("myAlert").style.visibility = "hidden";
}
Avatar billede exp Juniormester
07. juni 2004 - 12:29 #9
Det bliver nogle meget lange tekster, du kan se et eksempel her:
www.firewerx.dk/test.html

Det er kun de første - der kommer ihvertfald 30 punkter mere...

Så dit eksempel vil vist miste overskuelighed hurtigt ;-)

P.S. Læg mærke til, at den kun viser én af teksterne, men alle ligger i koden - og sådan skulle det gerne fortsætte ;-)
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:44 #10
Hvad siger du så til dette:

Du laver en div for hver alert du skal bruge, men de er alle skjult, og forbliver skjult.

Så laver vi det sådan at funktionen henter innerHTML fra den rigtige div, og fylder det over i myAlert-div'en?
Avatar billede exp Juniormester
07. juni 2004 - 12:45 #11
Det er nok sådan ca det jeg efterspørger ;-)
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 12:54 #12
Jamen så

<div id="alert1" style="visibility: hidden;">indhold her</div>
<div id="alert2" style="visibility: hidden;">indhold her</div>


og funktionen:

var d=document;
var strAlertStart = "";
function showAlert(iAlertIndex) {
    var w,h, a = d.getElementById("myAlert");
    w=a.offsetWidth; h=a.offsetHeight;
    a.style.left = (d.body.offsetWidth-w)/2;
    a.style.top = (d.body.offsetHeight-h)/2;
   
    if (strAlertStart == "") strAlertStart = a.innerHTML
    objAlertDiv = d.getElementById("alert" + iAlertIndex);
    a.innerHTML = objAlertDiv.innerHTML + strAlertStart
   
    a.style.visibility = "visible";
}

kaldes med showAlert(1) (eller 2 eller ...)

Bemærk at "Luk"-knappen ikke skal være med i de skjulte div'er. jeg startem med at gemme indholdet af myAlert i en variabel, og derefter fylder jeg det på til sidst i alert'en.
Avatar billede exp Juniormester
07. juni 2004 - 13:12 #13
Den melder fejl i denne linie:
w=a.offsetWidth; h=a.offsetHeight;

www.firewerx.dk/test2.html
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 13:43 #14
du er lidt på vildspor

den div der hed myAlert skal stadig være der, og linien

var w,h, a = d.getElementById("myAlert");

skal ikke ændres
Avatar billede exp Juniormester
07. juni 2004 - 13:48 #15
Avatar billede ldanielsen Nybegynder
07. juni 2004 - 13:56 #16
Sådan!

Kan du se hvad jeg gør:

if (strAlertStart == "") strAlertStart = a.innerHTML

Dette sker kun én gang, og det er faktisk "Luk"-knappen der bliver gemt i strAlertStart

Den div du ser er heletiden den med id=myAlert. Derfor virker luk-knappen hver gang.

Her får jeg så fat i den div du vil vise:
objAlertDiv = d.getElementById("alert" + iAlertIndex);

Og fylder dens indhold over i myAlert, efterfulgt af luk-knappen:
a.innerHTML = objAlertDiv.innerHTML + strAlertStart
Avatar billede exp Juniormester
07. juni 2004 - 14:03 #17
Super - takker mange gange for hjælpen :-D

Lidt ekstra smidt oveni ;-)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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