ouvrir nos pages dans une fenêtre modale ?

snypi · 17/11/2012 09:10:01

salut je suis en phase de réflexion sur le reloocking d'un site
et j'aimerais que mes pages s'ouvre avec un effet de fenêtre modal !
un style d'effet effet de fenêtre
mon souci est sur la faisabilité de l'idée ! (je pense qu'au pire avec une iframe on doit pouvoir le faire)
et deuxième problématique est sur le référencement !!

je suis preneur d'idée, de technique, de sentiment et de jugement
merci à vous

Stefpei · 19/11/2012 15:42:12

j'utilise l'effet " fenêtre" dans mes sites sous Zite+ : avec le jQuery "Fancybox"
Comme dans cette page, en cliquant sur la "standardiste" : http://www.lumensconcept.fr/contacter-l … ncept.html

Le référencement n'en souffre pas car le contenu qui s'affiche dans la fenêtre est présent dans la source de la page.
Je ne sais pas si ça répond à ton problème.

Fancybox est bien aussi pour les galeries, exemple : http://www.lumensconcept.fr/realisations.html
et est facile à utiliser dans l'éditeur Tinymce de Zite, sans rentrer dans la source...

Dernière modification par Stefpei (19/11/2012 15:52:39)

snypi · 19/11/2012 19:06:54

merci pour cette piste
mais je sais comment faire une fenêtre modale dans une div d'une page (mais j'aime beaucoup l'effet zoom de ton script )
ce que je souhaiterai est que j'ai une page principale et que les autres pages de ziteplus s'ouvrent dans une fenêtre modale par dessus ma page d'accueil
et la !! le problème commence

Stefpei · 19/11/2012 19:22:48

sur le site de Fancybox il y-a des exemples d'iframes affichés dans la fenètre modale
exemples : http://fancybox.net/

il y-a aussi FancyboxV2 avec des fonctions étendues notamment en iframes :
http://fancyapps.com/fancybox/#examples

jpg · 20/11/2012 12:54:49

snypi a écrit :

merci pour cette piste
mais je sais comment faire une fenêtre modale dans une div d'une page (mais j'aime beaucoup l'effet zoom de ton script )
ce que je souhaiterai est que j'ai une page principale et que les autres pages de ziteplus s'ouvrent dans une fenêtre modale par dessus ma page d'accueil
et la !! le problème commence

Question basique: une fois ta fenêtre modale affichée, tu envisages comment de passer aux autres pages ? par une fermeture de cette fenêtre ?

a+
Jean-Paul

snypi · 20/11/2012 14:50:58

oui tout à fait !!

une petite croix en haut à gauche fermera la pop up et on retrouve la page qui est en dessous soit la page d'accueil !

jpg · 21/11/2012 01:24:53

En gros quelque chose comme ça http://jpgg.free.fr/new093 ?

snypi · 21/11/2012 08:12:58

en gros c'est carrément ça:)
et comment que tu fait magicien

Super_chemist · 21/11/2012 18:26:50

La réponse est dans l'url : version 093...

jpg · 21/11/2012 19:06:40

Le javascript (ou en tout cas une version très proche) sera fourni en standard avec la 093, mais il doit tourner en 092 sans problème,
ainsi que les deux pages (très simples) permettant d'obtenir ce résultat.
Le reste est un site ziteplus tout à fait standard

Je t'en dis plus un peu plus tard, dès que j'ai deux minutes

a+
Jean-Paul

jpg · 22/11/2012 00:34:38

Bonsoir,

comment reproduire le fonctionnement du site précédent, simple

- un javascript (avec jquery) chargé de gérer les éventuelles fenêtres modales du sites, il s'agit de box.js situé dans le répertoire js
ce script sera fourni en standard dans la version 093

- deux pages à mettre en fin de la liste des pages, de niveau 1, comme la page d'accueil

La première page, de type 7 (c'est a dire, panneau avant la page centrale), de type php et qui va contenir

<?php 
 if (empty($_SESSION['zite_user'])) {
   $idbox = 'pg_'.$this->struct[$this->truepage][cPageIdent];
?>

.... CODE HTML de la page d'accueil à mettre ici ...

   <?php if ($this->truepage!=1) { ?>

      <div id="<?php echo $idbox; ?>_background"></div>
      <div id="<?php echo $idbox; ?>_" class="zalert" >
      <div id="<?php echo $idbox; ?>_close"><img src="deco/e1.png" width="130%"/></div>
      <div id="<?php echo $idbox; ?>_title">Titre</div>
      <div id="<?php echo $idbox; ?>_body">
   <?php   } ?>
<?php   } ?>

La deuxième page de type 8 (après la page centrale) et de type php aussi

<?php 
 if (empty($_SESSION['zite_user'])&&($this->truepage!=1)) {
    $idbox = 'pg_'.$this->struct[$this->truepage][cPageIdent];
    $this->content['js'].='<script type="text/javascript" src="js/box.js"></script>';
    $this->content['localcss'].='
		#'.$idbox.'_background{ display:none; position:fixed; height:100%; width:100%; top:0; left:0; background:black; z-index:98;	}
		#'.$idbox.'_close{ position:absolute; display:block;tabindex="2";right:-7px;top:-14px;}
		#'.$idbox.'_{ display:none; position:fixed; z-index:99;}
		#'.$idbox.'_action {width:100%;text-align:center;tabindex:1;}
		';
?>
<!--<button id="<?php echo $idbox; ?>_action">CLOSE</button>
    </div>-->
</div>

<script language="Javascript" type="text/javascript">ZP_TOOLS.zpBoxConfirm.showBox("<?php echo $idbox; ?>_","");</script>
<?php   } ?>

- Mettre dans la page d'accueil du site (la première page) un texte bidon, par exemple

<p>&nbsp;</p>

- il faut aussi aller dans configuration et mettre non aux options page_date et page_div

Et voilà,
tu as un site fonctionnel

a+
Jean-Paul

snypi · 22/11/2012 00:54:42

merci jpg ! je test cela dès que j'ai le temps de me penchez dessus
juste en lisant le script je me pause la question est t'il possible d'ouvrir une page normalement
bah il est un peu casse pied le snypi

jpg · 22/11/2012 01:02:01

snypi a écrit :

merci jpg ! je test cela dès que j'ai le temps de me penchez dessus
juste en lisant le script je me pause la question est t'il possible d'ouvrir une page normalement
bah il est un peu casse pied le snypi

C'est vrai

C'est possible, il faut jouer avec la ligne if (empty($_SESSION['zite_user'])
et rajouter une condition, par exemple if (empty($_SESSION['zite_user'] && ($this->struct[$this->truepage][cPageIdent]!=lapageaaffcihernormalement))

c'est très souple comme solution

a+
Jean-Paul

snypi · 22/11/2012 15:19:56

salut merci jpg car grâce à toi j'ai une lueur d'espoir qui répond à l'ensemble de mon idée (notamment le référencement mille fois mieux qu'un iframe)

mais j'ai une petite incompréhension et c'est à mon avis pour cela que cela ne marche pas
j'ai récupérer ton script box.js
désactiver la création auto des div | activer jquery sur toujours | virer les dates
mis en dernière les 2 pages php avec les codes
vider la page d'accueil
et cela n'a pas l'effet escompté ! est ce compatible avec la 9.2 ?
je vient de testé sur un 9.2 vierge cela marche !!
je trifouille bidouille pourquoi cela ne marche pas sur mon ziteplus à moi

snypi · 22/11/2012 18:09:39

héhé c'est superbe merci JPG
juste un petit truc "titre" ne sert pas à grand chose si on charge différente page par contre l'avoir mis ici nous permet de comprendre qu'on peut rajouter ce que l'on veut
je continue de joué avec car y'a des tonnes de truc que je ne comprend pas encore

snypi · 26/11/2012 00:45:06

bon je m'éclate à faire mon site avec ta solution JPG merci
j'aurais aimé à coter de la croix close avoir deux petite image pour allé à la page suivante ou précédente est ce possible ???
genre prev / next

snypi · 05/02/2013 10:05:02

je revient à la charge avec cette configuration de ziteplus
vraiment un petit bijoux

maintenant je but réellement avec cette possibilité de faire un lien automatique suivant ou précédent d'une page de même niveau ?
voila ce que je veut si ma page est un niveau 2
<>X et juste la X si je suis dans un niveau 1

le but étant d'avoir le lien qui ce génère automatiquement ou si je peut le faire via un panneau cela m'iras aussi bien mais je suis limité

sinon pour ceux qui n’ont pas découvert l'option que jpg ma proposer il vous manque le fichier box.js que voici

[== JavaScript ==]
/* javascript: boite de dialogue modale
*Copyright Jean-Paul GIAUSSERAND 2012
Site: http://www.giausserand.fr/index.php?perma=ziteplus
Licence : CeCILL-B, http://www.cecill.info
	v1.1  21/07/12  Changement complet du code: passage en objet, correction erreur, ajout paramÃ¨tre etc ...
	v1.0	20/07/12  CrÃ©ation du code librement inspirÃ© du code d'Adrian "yEnS" Mato Gondelle, website: www.yensdesign.com, email: yensamg@gmail.com
*/

var ZP_TOOLS = ZP_TOOLS || {};

(function(){
	ZP_TOOLS.zpBoxConfirm = {
	  Visible : false,
		BoxId : '',
		Opacity : 4	,
		showBox : function(boxid,action){
		  this.BoxId = "#" + boxid;
		  this.BoxIdBack = this.BoxId + "background";
		  this.BoxIdClose = this.BoxId + "close";
		  this.BoxIdAction = this.BoxId + "action";
			if(!this.Visible){
				this.Visible=true;
				this.centerBox();
				if (this.Opacity<1 || this.Opacity>9) { this.Opacity=7; }
				$(this.BoxIdBack).css({"opacity" : "0."+this.Opacity});
				$(this.BoxId).fadeIn("slow");
				$(this.BoxIdBack).fadeIn("slow");
				$(this.BoxIdAction).click(function(){
					window.location.href = action;
				});
			}
		},
		//hide box
		hideBox : function(){
			if(this.Visible&&this.BoxId){
				this.Visible=false;
				$(this.BoxId).fadeOut("slow");
				$(this.BoxIdBack).fadeOut("slow");
			}
		},
		// center box
		centerBox:function(){
			var boxHeight = $(this.BoxId).height();
			var boxWidth = $(this.BoxId).width();
			/*jpg*/
			this.vpage = {xMin: 0, xMax: 0, yMin: 0, yMax: 0, wMax:0 , hMax:0, bMax:5, iwMax:0, ihMax:0};//Positions visible de la page
 			this.vpage.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
			this.vpage.xMax = this.vpage.xMin + (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
			this.vpage.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			this.vpage.yMax = this.vpage.yMin + (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
			this.vpage.bMax = 0;//Marge maximun: Ã  paramÃ©trer
			this.vpage.wMax = this.vpage.xMax-this.vpage.xMin-this.vpage.bMax*2;
			this.vpage.hMax = this.vpage.yMax-this.vpage.yMin-this.vpage.bMax*2;
			this.vpage.iwMax = (boxWidth <= this.vpage.bMax*2) ? this.vpage.wMax : Math.min((boxWidth-this.vpage.bMax*2),this.vpage.wMax);
			this.vpage.ihMax = (boxHeight <= this.vpage.bMax*2) ? this.vpage.hMax : Math.min((boxHeight-this.vpage.bMax*2),this.vpage.hMax);
			/*jpg*/

			//request data for centering
			/*jpg*/
			this.windowWidth = this.vpage.iwMax;	//document.documentElement.clientWidth;
			this.windowHeight = this.vpage.ihMax; //document.documentElement.clientHeight;
			/*jpg*/
			//centering
			$(this.BoxId).css({
				"position": "absolute",
				"top": (5 ),
				"left": (30 )
				});
		}
};
var self=ZP_TOOLS.zpBoxConfirm;

// Pour fermer la boÃ®te de dialogue
$(document).ready(function(){
	// par la croix de fermeture
	$(ZP_TOOLS.zpBoxConfirm.BoxIdClose).click(function(){
		ZP_TOOLS.zpBoxConfirm.hideBox();
	});
	// en cliquant Ã  l'extÃ©rieur de la boite de dialogue
	$(ZP_TOOLS.zpBoxConfirm.BoxIdBack).click(function(){
		ZP_TOOLS.zpBoxConfirm.hideBox();
	});
});

})();

PS : les pages générées ont une url du type nomdelapage.html#.URC9LqXK4r5 ce code babare est changeant à chaque chargement de la page
- est ce que cela risque d'avoir un souci quand au référencement ??

snypi · 12/02/2013 10:26:23

snypi a écrit :

maintenant je but réellement avec cette possibilité de faire un lien automatique suivant ou précédent d'une page de même niveau ?
voila ce que je veut si ma page est un niveau 2
<>X et juste la X si je suis dans un niveau 1
le but étant d'avoir le lien qui ce génère automatiquement ou si je peut le faire via un panneau cela m'iras aussi bien mais je suis limité

j'ai trouver une solution à mon souci du coup je partage
alors voila j'ai un code php qui fait que si j'ai un panneau de niveau 3 mon script génère automatiquement < > mais sans lien

[== PHP ==]
<?php if ((!empty($this->content['pnl3'])) && ($_SESSION['zite_admin'] == 0)) { echo '<a href="#" id="lien1" onclick="lien1();">&lt;</a> <a href="#" id="lien2" onclick="lien2();">&gt;</a>';} ?>

du coup avec un code javascript en début de page j'attribu un lien à chaque id

[== JavaScript ==]
<script type="text/javascript" >
function lien1() {
   document.getElementById("lien1" ).href='lien.html';
   }
function lien2() {
   document.getElementById("lien2" ).href='autrelien.html';
}</script>

cela fonctionne bien
mais n'étant pas un pro de javascript est ce que mon code est correct?

jpg · 14/02/2013 11:34:05

Pourquoi pas
mais ne peux tu pas générer aussi dans ton panneau de type 3 les références du lien directement, a quoi sert l'étape javascript à ce niveau ?
enfin, si j'ai bien compris ce que tu veux faire
a+
Jean-Paul

snypi · 14/02/2013 16:20:45

content de te retouvé parmis nous!!
je ne peut rien montré encore mais l'envie de partager ton petit script est très grand

j'ai juste un panneau de type 3 qui me sert à gérer un css perso pour un ensemble de sous page
mon fameux code est mis dans le panneau type 8 avec le code que tu à donné
#'.$idbox.'_close{ position:absolute; display:block;tabindex="2";right:-7px;top:-14px;}

donc pour chaque fenêtre modale j'ai une croix pour fermé et c'est < > généré
j'ai pas trouver de technique php pour faire un lien dynamique vers une page de niveau 2
alors je javascript à été ma solution

sinon j'ai une 15ene de sous page donc pour chaque sous page il me faudrait un panneau pour y mettre les liens manuellement ce qui rend l'administration complexe !!

snypi · 24/03/2013 11:07:00

peut ton dire à box.js de ne pas créer des #DF46Q aléatoire mais une url bien définie
car si on facebook ,google like la page cela peut posé problème !!

jpg · 24/03/2013 19:20:52

snypi a écrit :

peut ton dire à box.js de ne pas créer des #DF46Q aléatoire mais une url bien définie
car si on facebook ,google like la page cela peut posé problème !!

? j'ai pas compris la question

snypi · 24/03/2013 20:10:57

pour être plus claire j'aimerais que quand le javascript ouvre la fenêtre modale ne me fasse pas un code aléatoire
exemple à l'heure actuel j'ai cette id box sur firefox /loisirs_enfants.html#.UU8_N1f3O94 et celle ci sous chrome loisirs_enfants.html#.UU8_nBwz32s
comme on peut le constaté l'url n'est pas la même et pas signifiante

j'avais peur que si je like la page donc que je créer un lien vers ma page avec une id box obsolète le lien ne fonctionne pas !

mais je me suis trompé donc pas trop de souci à part le coté url signifiante

jpg · 24/03/2013 21:49:41

Bonsoir snypi,
je ne vois pas trop a quoi correspond exactement #.UU8_N1f3O94 ou #.UU8_nBwz32s
En fait c'est surtout le lien avec box.js que je ne vois pas ... si tu peux m'expliquer
a+
Jean-Paul

snypi · 25/03/2013 10:08:35

salut jpg
effectivement sur ton site demo le souci n'y est pas ! (j'ai vient de voir que tu avais penché sur mon < prev > next, merci à toi jpg tu bosse toujours dans l'ombre c'est super sympa)

ne serait ce pas du à l'url rewriting ou mon souci ne viendrait pas de ceci ?

[== PHP ==]
<?php
 if (empty($_SESSION['zite_user'])&& ($this->struct[$this->truepage][cPageIdent]!=1151951287)) {
   $idbox = 'pg_'.$this->struct[$this->truepage][cPageIdent];
?>

que j'ai mis dans le panneau avant la page central ??

edit : peut être une embrouille entre BoxId boxid $idbox ??

Dernière modification par snypi (25/03/2013 11:31:15)

Forum ZitePLUS

#1 17/11/2012 09:10:01

ouvrir nos pages dans une fenêtre modale ?

#2 19/11/2012 15:42:12

Re : ouvrir nos pages dans une fenêtre modale ?

#3 19/11/2012 19:06:54

Re : ouvrir nos pages dans une fenêtre modale ?

#4 19/11/2012 19:22:48

Re : ouvrir nos pages dans une fenêtre modale ?

#5 20/11/2012 12:54:49

Re : ouvrir nos pages dans une fenêtre modale ?

#6 20/11/2012 14:50:58

Re : ouvrir nos pages dans une fenêtre modale ?

#7 21/11/2012 01:24:53

Re : ouvrir nos pages dans une fenêtre modale ?

#8 21/11/2012 08:12:58

Re : ouvrir nos pages dans une fenêtre modale ?

#9 21/11/2012 18:26:50

Re : ouvrir nos pages dans une fenêtre modale ?

#10 21/11/2012 19:06:40

Re : ouvrir nos pages dans une fenêtre modale ?

#11 22/11/2012 00:34:38

Re : ouvrir nos pages dans une fenêtre modale ?

#12 22/11/2012 00:54:42

Re : ouvrir nos pages dans une fenêtre modale ?

#13 22/11/2012 01:02:01

Re : ouvrir nos pages dans une fenêtre modale ?

#14 22/11/2012 15:19:56

Re : ouvrir nos pages dans une fenêtre modale ?

#15 22/11/2012 18:09:39

Re : ouvrir nos pages dans une fenêtre modale ?

#16 26/11/2012 00:45:06

Re : ouvrir nos pages dans une fenêtre modale ?

#17 05/02/2013 10:05:02

Re : ouvrir nos pages dans une fenêtre modale ?

#18 12/02/2013 10:26:23

Re : ouvrir nos pages dans une fenêtre modale ?

#19 14/02/2013 11:34:05

Re : ouvrir nos pages dans une fenêtre modale ?

#20 14/02/2013 16:20:45

Re : ouvrir nos pages dans une fenêtre modale ?

#21 24/03/2013 11:07:00

Re : ouvrir nos pages dans une fenêtre modale ?

#22 24/03/2013 19:20:52

Re : ouvrir nos pages dans une fenêtre modale ?

#23 24/03/2013 20:10:57

Re : ouvrir nos pages dans une fenêtre modale ?

#24 24/03/2013 21:49:41

Re : ouvrir nos pages dans une fenêtre modale ?

#25 25/03/2013 10:08:35

Re : ouvrir nos pages dans une fenêtre modale ?

Pied de page des forums