Créer une page de publicité qui s'affiche au dessus d'une page

Question

raknal

1 Mar 2011 à 08:14

Titre: Créer une page de publicité qui s'affiche au dessus d'une page en grisant derrière

Bonjour,

Je parle de la fenêtre modale qui s'affiche sur une page web souvent pour y mettre de la publicité, cette fenêtre qui rend la page derrière plus sombre et qu'on ne peut pas y cliquer la page derrière.

Est-ce que c'est du <iframe> ?

Comment faire ça: JQuery Lightbox, JQuery Modal Dialog???

Su4p

1 Mar 2011 à 10:34

Bonjour personnellement j'utilise la shadowbox qui offre les mêmes possibilités que les "lightbox like" mais qui est "framework free" donc tu peux l'utiliser à ton bon vouloir avec jquery ou prototype. Par contre ce n'est certainement pas une iframe.
Pour en savoir plus ....

raknal

1 Mar 2011 à 10:59

Merci Su4p pour ce lien

Je cherche un genre comme ça, sans le bouton "x" pour fermer, comment faire pour afficher cela lors de l'ouverture de la page?

En fait, ma référence c'est le lightbox du site groupon.fr où il faut remplir le formulaire sur le lightbox avant de pouvoir passer à la page derrière

Su4p

1 Mar 2011 à 16:12

1. Alors je sais qu'il est possible d'enlever le bouton "fermer" probablement en supprimant cette ligne (

<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>

) tu peux aussi partir sur quelque chose que tu fais toi même en t'aidant de ce tutoriel qui m'a pas l'air trop mal et cela te permettras de gérer plus de paramètres.
2. Si tu veux que ça s'affiche comme sur le groupon, il suffit d'afficher cette "lightBox" sur l'index de ton site. La question reste à savoir quand ne pas l'afficher. Plusieurs solutions s'ouvrent alors à toi (cookies, session, ou enregistrement en base) à toi de voir.
Modifié par Su4p (01 Mar 2011 - 16:13)

raknal

2 Mar 2011 à 13:13

Pour résumer, il s'agit de jquery lightbox ou shadowbox qui sera donc lancé à l'onload (chargement complet)! Merci pour le lien pour le développer soi-même, je crois que je vais utiliser ça

arnaudboub

13 Mar 2011 à 11:55

Bonjour à tous.

J'ai essayé ça, mais le bouton "quitter" ne fonctionne pas... ??
Qq'un a une idée ?

a écrit :

<script type="text/javascript">
//Evénement lié au clic du bouton de la page
jQuery(".shadowbox").ready(function() {
//Récupération des dimensions de la page
var xHeight = jQuery(document).height();
var xWidth = jQuery(window).width();
//Dimensionnement du masque recouvrant la page
jQuery("#page").css({"width":xWidth,"height":xHeight});
//Apparition du masque
jQuery("#page").fadeIn();
//Attribution à celui-ci d’une transparence de
//façon à laisser la page légèrement visible
jQuery("#page").fadeTo("fast",0.6);
var xH = jQuery(window).height();
var xW = jQuery(window).width();
//Centrage de la shadow box
jQuery("#dialog").css("top", xH/2-jQuery("#dialog").height()/2);
jQuery("#dialog").css("left", xW/2-jQuery("#dialog").width()/2);
//Apparition de la shadow box
jQuery("#dialog").fadeIn(1000);

});
//Fermeture de la shadow box via le bouton qu’elle contient
jQuery(".window .close").click(function () {

});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<br>

<div id="boxes"/>

<div id="dialog" class="window"/>
<center>
<p>Exemple de ShadowBox
<br>
</p>
<p><br>
<input type="button" class="close" value="Quitter" />
</p>
</center>
</div>

<div id="page">
</div>
</div>
</body>
</html>

Sujet clos