jQuery Auto Opstarten
ik heb een lightbox geïnstalleerd in me website, maar die werkt alleen als je er op drukt.
Nu wil ik ook dat als je naar de eerste pagina gaat, de popup automatisch opent.
Maar ik vind niet hoe je dat kan doen met jQuery?
Hopelijk weten jullie hoe het noemt?
Dem
Code (php)
1
2
3
2
3
$(document).ready(function() {
//de pagina is geladen, nu moet er dus iets gebeuren?
});
//de pagina is geladen, nu moet er dus iets gebeuren?
});
gewoon zo dacht ik.
Gewijzigd op 27/10/2012 18:39:02 door Bo Ter Ham
alvast bedankt, die kon ik denk ik ook bedenken maar ik werk nog maar pas met jQuery en was op zoek naar een start of open functie.
Nu misschien een andere vraag,
Is het mogelijk om het volgende te doen
Als de pagina geladen is -> Doe alsof er op 'die ene ' link gedrukt is.
hebben zij geen documentatie waar dit instaat?
Maar omdat ik het niet zelf geschreven heb, weet ik ook niet hoe ik eraan kan veranderen.
Misschien is het beter dat ik zelf iets schrijf, maar ik weet niet hoe.
Op Google vind je wel veel Lightbox'en.
Misschien kan je me helpen hoe ik het zelf maak?
Ik bedoel, de functie ofzo om de achtergrond grijzer en inactief te maken.
Een kader te laten verschijnen? (Is dat gewoon een box?)
De css kan ik zelf, ronde hoekjes rond de box enz..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function showDialog(andialog) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(100);
$('#mask').fadeTo("fast",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(andialog).css('top', winH / 2 - $(andialog).height() / 2);
$(andialog).css('left', winW / 2 - $(andialog).width()/ 2);
//transition effect
$(andialog).fadeIn(100);
}
function closeDialog() {
$('#mask').hide();
$('.window').hide();
}
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(100);
$('#mask').fadeTo("fast",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(andialog).css('top', winH / 2 - $(andialog).height() / 2);
$(andialog).css('left', winW / 2 - $(andialog).width()/ 2);
//transition effect
$(andialog).fadeIn(100);
}
function closeDialog() {
$('#mask').hide();
$('.window').hide();
}
De class window is niet meer dan display:hidden en een voldoende z-index (zodat ie altijd bovenop ligt)
#mask heeft een z-index die iets lager is maar wel boven de rest, de rest van de css is puur opacity en kleur.
Dus je maakt gewoon div met een id en de class window, en daarbinnen maak je dan de daadwerkelijke opmaak met divs etc.
Komt gewoon van internet dit.
Toevoeging op 27/10/2012 19:48:57:
Owja, let op dat de het argument van showDialog(andialog) altijd in de vorm is van '#divid"
Gewijzigd op 27/10/2012 19:46:18 door Ger van Steenderen
$('a.lightbox').eq(0).click();
});
@Hertog, ik denk dat het wel zou lukken maar ik zal het op een kortere manier proberen.
Toch bedankt
Dem
Werken doet het iig want ik gebruik het ook.
Ik kan hier anders de code zetten hoe ik het gedaan heb?
Maar, nog 1 Klein vraagje,
Ik heb nu een popup die verschijnt als je opstart, maar hoe maak je de achtergrond inactief?
Alvast bedankt
Dem
Ik vind overigens Avgrund een geweldige modal box in Js: http://lab.hakim.se/avgrund/ en de jQuery plugin: http://labs.voronianski.com/jquery.avgrund.js/
in css:
Code (php)
1
2
3
4
5
2
3
4
5
#mask {
z-index: 200;
display : none;
background-color :#666;
}
z-index: 200;
display : none;
background-color :#666;
}
De rest wordt met jquery geregeld
Als dan je popup div een z-index van 250 geeft komt die daar weer boven.
dat zijn echt wel zeer goeie inner lightboxes, maar ik zal het nu bij die houden die ik nu gebruikt heb.
Tevens heb ik ook nog een cookie plugin gebruikt om cookies te plaatsen met jQuery. Zodat de popup niet telkens verschijn.
@Ger, ik heb nu een mask geprobeert, over heel mijn body, maar je kan nog steeds voorbeeld naar het menu gaan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
* /Lightbox background */
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:120px;
left:50%;
margin-left:-300px;
width:600px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#mask {
z-index: 6000;
display : none;
background-color :#666;
}
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:120px;
left:50%;
margin-left:-300px;
width:600px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#mask {
z-index: 6000;
display : none;
background-color :#666;
}
Toevoeging op 28/10/2012 18:52:21:
Misschien nog een vraagje, waar ik ook nog mee sukkel
De <div id="mask"> waar moet ik die plaatsen?
Ik plaats hem over heel m'n body maar das geen goed idee denk ik ;a
En dan gewoon zo:
Code (php)
1
2
3
4
2
3
4
<div id="mask"></div>
</body>
<!-- hier je javascripts -->
</html>
</body>
<!-- hier je javascripts -->
</html>
Tevens raad ik je aan de hoogte aan te passen aan de hoogte van de pagina ($(document).height()) zodat je niet door scrollen de pagina niet meer ziet. En je CSS code is niet compleet, er moet nog position: absolute; en top: 0; right: 0; bottom: 0; left: 0; bij.
Maar wat gaat er nu precies niet goed dan, want als die lightbox* id je popups zijn gaat de mask over de popup heen. Ik zou daar sowieso classes van maken dan kan je meerdere popups op één pagina hebben.
Overigens, kun je Wouters advies ook opvolgen, alleen krijg je dan een beetje dat flits effect.
Edit:
Het advies van hierboven en het advies van eerder
Het advies van hierboven en het advies van eerder
Gewijzigd op 28/10/2012 19:30:42 door Ger van Steenderen
Bedankt om te zeggen waar de div moest,
Mijn javascript plaats ik wel helemaal bovenaan in mijn head.
Maar als je het onderaan zet, moet het dan niet voor de body zijn?
Zoals Wouter dus zegt.
@Wouter, bedankt voor die css.
Ik heb het aangepast en het werkt nu! Thanks