Popup's
Ik weet niet zo goed welke richting ik moet zoeken, misschien kunnen jullie een tip geven hoe ik dit handig kan maken en eventueel zoektermen vertellen waarop ik kan zoeken?
Ik heb wel een voorbeeld gevonden wat ik zou willen. Als je op iets in de portfolio klikt komt er een popup en zie je de oude website aan de achterkant nog + er wordt iets toegevoegd aan de url. (Voorbeeld)
Gewijzigd op 03/02/2015 16:14:20 door Bart Matsko
google op: css javascript popup div
brengt je bijvoorbeeld hier: http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/
google op: javascript change url in address bar
brengt je bijvoorbeeld hier: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
Frank Nietbelangrijk op 03/02/2015 16:19:58:
Het zijn twee aparte dingen:
google op: css javascript popup div
brengt je bijvoorbeeld hier: http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/
google op: javascript change url in address bar
brengt je bijvoorbeeld hier: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
google op: css javascript popup div
brengt je bijvoorbeeld hier: http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/
google op: javascript change url in address bar
brengt je bijvoorbeeld hier: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
Bedankt ik ga ermee aan de slag!
In de HTML heb ik alle overbodige niet functionele dingen weggehaald en heb ik dit over:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body>
<div id="container">
<!--POPUP-->
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" onclick="popup('popUpDiv')">Click to Close CSS Pop Up</a>
</div>
<!-- / POPUP-->
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
</div>
</body>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body>
<div id="container">
<!--POPUP-->
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" onclick="popup('popUpDiv')">Click to Close CSS Pop Up</a>
</div>
<!-- / POPUP-->
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
</div>
</body>
Nu wilde ik hetzelfde doen in het JS bestand zodat ik erachter kwam hoe het in z'n werk ging, maar dat lukt me totaal niet. Ik hoop dat er iemand is die een klein voorbeeldje voor me heeft inplaatsvan een groot bestand?
- Aar - op 26/02/2015 13:43:20:
Ikzelf gebruik de Fancybox. Die is makkelijk te implementeren en heeft een hoop mogelijkheden.
Dat is toch vooral voor foto's? Ik wil het graag zo simpel mogelijk..
webdesignandsuch.com is een complete site met artikelen over allerlei web-gerelateerde zaken.
Bedoel je specifiek dit? Oftewel, een contactformulier die de pagina (URL) vanwaar deze verstuurd werd meegeeft?
Ik denk dat fancybox/lightbox -of in zijn algemeenheid- een "inline popup", die oproepbaar is "binnen" elke gewenste pagina, dan toch een heel eind in de buurt komt van datgene wat je zoekt?
Je zou een standaard oplossing kunnen gebruiken, of zelf iets simpels bouwen. Wat je zou kunnen doen is een absoluut gepositioneerde div over je hele pagina kunnen zetten en daarmee de rest van je site kunnen "dimmen" en daarover weer een div heenzetten met je formulier.
Met jQuery kun je dit soort animaties redelijk makkelijk maken, maar je kunt je dan afvragen of je niet het wiel opnieuw aan het uitvinden bent want in feite doet fancybox of equivalent dit ook al voor jou.
Thomas van den Heuvel op 26/02/2015 15:56:36:
De link in het oorspronkelijke bericht werkt niet.
webdesignandsuch.com is een complete site met artikelen over allerlei web-gerelateerde zaken.
Bedoel je specifiek dit? Oftewel, een contactformulier die de pagina (URL) vanwaar deze verstuurd werd meegeeft?
Ik denk dat fancybox/lightbox -of in zijn algemeenheid- een "inline popup", die oproepbaar is "binnen" elke gewenste pagina, dan toch een heel eind in de buurt komt van datgene wat je zoekt?
Je zou een standaard oplossing kunnen gebruiken, of zelf iets simpels bouwen. Wat je zou kunnen doen is een absoluut gepositioneerde div over je hele pagina kunnen zetten en daarmee de rest van je site kunnen "dimmen" en daarover weer een div heenzetten met je formulier.
Met jQuery kun je dit soort animaties redelijk makkelijk maken, maar je kunt je dan afvragen of je niet het wiel opnieuw aan het uitvinden bent want in feite doet fancybox of equivalent dit ook al voor jou.
webdesignandsuch.com is een complete site met artikelen over allerlei web-gerelateerde zaken.
Bedoel je specifiek dit? Oftewel, een contactformulier die de pagina (URL) vanwaar deze verstuurd werd meegeeft?
Ik denk dat fancybox/lightbox -of in zijn algemeenheid- een "inline popup", die oproepbaar is "binnen" elke gewenste pagina, dan toch een heel eind in de buurt komt van datgene wat je zoekt?
Je zou een standaard oplossing kunnen gebruiken, of zelf iets simpels bouwen. Wat je zou kunnen doen is een absoluut gepositioneerde div over je hele pagina kunnen zetten en daarmee de rest van je site kunnen "dimmen" en daarover weer een div heenzetten met je formulier.
Met jQuery kun je dit soort animaties redelijk makkelijk maken, maar je kunt je dan afvragen of je niet het wiel opnieuw aan het uitvinden bent want in feite doet fancybox of equivalent dit ook al voor jou.
Die website is inderdaad offline gegaan in de tussentijd.
Als je naar de eerste reactie van Aar kijkt linkt hij naar webdesignandsuch.com. Daar heb ik het over. Dat is precies wat ik wil, alleen hebben ze naast alleen de functionaliteit veel andere rommel erbij gegooid.
Daardoor zie ik niet wat in het JS bestand er nou precies voor zorgt dat het divje display block of display none krijgt. Dat is eigenlijk alles wat ik zoek.
Quote:
Daardoor zie ik niet wat in het JS bestand er nou precies voor zorgt dat het divje display block of display none krijgt
Volg de Credits > Script source link, daar staat:
Quote:
toggle(div_id) – This simply toggles the inserted div name from being displayed (display:block) to being hidden (display:none).
jQuery heeft hier een ingebouwde functie voor.