Bonjours,
J'ai suivis ce petit tutoriel pour la création d'une modal box.
Mais helas cela ne me suffit pas, je souhaiterai savoir en plus comment lancer la modalbox au chargement de la page.
Merci
Bonjours,
J'ai suivis ce petit tutoriel pour la création d'une modal box.
Mais helas cela ne me suffit pas, je souhaiterai savoir en plus comment lancer la modalbox au chargement de la page.
Merci
Coucou,
pour faire propre, j'ai séparé l'évènement click de ton lien avec l'affichage du dialog en elle même. Ceci te permettra ainsi de faire appel à ton dialog, de n'importe où de ton JS. Voici le JS que j'obtiens :
Comme tu peux le voir, la fonction showDialog attend en paramètre le sélecteur du div à afficher
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 $(document).ready(function() { //on affiche le dialog à l'ouverture de la page showDialog('#dialog2'); //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); showDialog(id); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); function showDialog(id) { //Get the screen height and width 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(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }![]()
Merci beacoup du coup de main
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager