PDA

Bekijk Volledige Versie : popupje laten verschijnen als......



TiMMiEJ
28/03/05, 19:29
Ik zal het zo goed mogelijk proberen uit te leggen, er zullen hier vast mensen zijn die weten hoe dit werkt ;).

Op mijn bestellen pagina van mijn site staat wat je allemaal bij je gameserver krijgt. Maar ik wil als een gebruiker hier op klikt (dus op die tekst, of icoontje wat er voor staat) dat ie dan een popupje krijgt wat dat precies inhoud. De site is gescript in php.

Kan iemand hier mij de code geven?

XBL
28/03/05, 19:51
Even googlen (http://www.google.nl/search?q=onclick%20popup%20javascript) (4e)?

Jochem

albert_dijkstra
28/03/05, 19:55
<div align="center">
<center>
<table border="1" cellspacing="1"><tr>
<td bgcolor="#CCFFCC">
<p align="center">
<font size="2" style="cursor:hand" onMouseOut="dis()" onMouseOver="chen()">
Info Website </font>
</p>
</td>
</tr></table>
</center>
</div>
<input type=button name="add" style="position:absolute;top:100;left:360;background-color:CCFFCC;color:black;border-color:lime;height:0;width:0">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function chen()

//verander hieronder de teksten in je eigen

{add.value="Statistieken Leejoo.nl \n\nBezoekers vanaf maart 2001 t/m mei 2003 : \n 1.589.340 \n\nAantal Javascripts : \n Over de 400 !\n\nAantal links : \n Meer dan 2000 ! \n\netc... etc... \n Handig en ruimte besparend!"
add.style.height=300
add.style.width=350
}
function dis()
{
add.value=""
add.style.height=0
add.style.width=0
}
// End -->
</script>

zoeits?

AngTalunin
28/03/05, 20:32
Het best is denk ik om niet om je informatie in je pagina zelf te zetten (extra laadtijd), maar gewoon een aparte bestand bv info.php te maken, waaraan je dan een id mee geeft, zodat je dynamisch alle info kan weergeven.

Code gaat er dan zo ongeveer uitzien:

<html>
<head>
<script>
function openWindow(id) {
window.open('http://www.foo.com/info.php?id='+id,'vensternaam',
'width=300,height=300,scrollbars=no,toolbar=no,loc ation=no');}
</script>
</head>
<body>
<a href='#' onClick="openWindow('1')">Poging 1</a>
<br /><br />
<a href="info.php?id=1" target='_blank' >Poging 2</a>
</body>
</html>

is dit duidelijk uitgelegd?

::EDIT::
Om niet javascript gebruikers te benadelen is de tweede methode beter, maar dan kan je je venster grootte etc niet instellen

MediaServe
28/03/05, 22:58
De JavaScript functie voor het openen van een window in het midden van het scherm. Deze hoort dus in de HEAD van je document.

<script type="text/javascript">
<!-- //

function openWindow(url)
{
w = 400;
h = 300;
posX = 0;
posY = 0;

if (window.screen)
{
posX = Math.floor((screen.availWidth - w) / 2);
posY = Math.floor((screen.availHeight - h) / 2);
}

var myWindow = window.open(url, 'myWindow', 'width='+w+', height='+h+', top='+posY+', left='+posX+', scrollbars=no, dependent=1');
myWindow.window.focus();
}

// -->
</script>En om dan de popup te openen gebruik je een <a> tag. Zo werkt het ook als iemand geen JavaScript ondersteuning heeft.
<a href="/specificaties.php?id=1" onclick="openWindow(this.href); return false;">Specificaties</a>

IT-worX
28/03/05, 23:01
Persoonlijk zou ik ook voor de methode van AngTalunin gaan...Zeker omdat hij een punt heeft: niet iedereen wilt javascirpt gebruiken.

AngTalunin
28/03/05, 23:22
Origineel geplaatst door MediaCreations

posX = Math.floor((screen.availWidth - w) / 2);
posY = Math.floor((screen.availHeight - h) / 2);


Gebruik a.u.b. nooit availWidth. Ik heb hier nl twee beeldscherm, ingesteld als DualView. Als je dit gebruikt opent hij het scherm met de ene helft op het ene en de andere helft op het andere beeldscherm...Zeker niet leuk....

MediaServe
28/03/05, 23:29
Origineel geplaatst door IT-worX
Persoonlijk zou ik ook voor de methode van AngTalunin gaan...Zeker omdat hij een punt heeft: niet iedereen wilt javascirpt gebruiken. Mijn voorbeeld werkt ook zonder javascript hoor ;)
Origineel geplaatst door AngTalunin


Gebruik a.u.b. nooit availWidth. Ik heb hier nl twee beeldscherm, ingesteld als DualView. Als je dit gebruikt opent hij het scherm met de ene helft op het ene en de andere helft op het andere beeldscherm...Zeker niet leuk.... Heb je een workaround om de popup goed gecentreerd te krijgen?

AngTalunin
28/03/05, 23:31
Puh, niet dat ik weet...je zou een check kunnen inbouwen die controleert of de width de som is van 2 resoluties, maar dan weet je nog niet op welk scherm het opent.

Zal er eens over nadenken....

AngTalunin
28/03/05, 23:49
Heb hier wat info gevonden:
http://www.infimum.dk/HTML/JSwindows.html

Sizing and positioning windows

The window configuration options allows you to decide the initial size and position of a window. There are a few dangers with this, that one must be aware of.

Most browsers' standard security settings will not allow you to create a window that is less than 100 pixels wide or high.

It is dangerous to decide the size or position of the window based on the size of the screen, for several reasons:

* In a browser with MDI (e.g., Opera), a window does not have the entire screen available to it, but must stay inside the parent application window. Trying to position the window relative to the screen, can move it off the visible part of the parent window. It is safer to let the browser position the window.

* Centering a window relative to the screen also interacts badly with multiple monitors. Often the center of the available screen will be exactly where the desktop is split between the monitors, putting half of the window on each monitor. If the monitors have different resolutions, the available height can not be trusted either.

* No matter how carefull you are, some people will have font sizes, user style sheets and resolutions that make your content overflow your window. Always make the window resizable and allow scrollbars.

* A popup that fills the entire screen, always annoy users. Never do it!

In summary, make the new window the size it needs to be, and let the browser place it. Also make sure that the window is resizable

FransVanNispen
29/03/05, 00:23
Als het om een korte omschrijving gaat, is het misschien een idee om het `title` attribute te gebruiken, dat geeft een standaard tip venster.

<a href... title='Popup tekst'>....<....

TiMMiEJ
29/03/05, 18:27
Bedank voor alle reacties, ik heb het werkend gekregen :)