11489 sujets

JavaScript, DOM et API Web HTML5

Jquery multiple windows...

Bonjour à tous,

Tout d'abord merci beaucoup pour ce forum... !

Je souhaiterai réutiliser ceci : http://interface.eyecon.ro/demos/windows.html
Mon problème c'est que au sein d'une même page je voudrai pouvoir ouvrir plusieurs "popup"...

Avez vous des idées ou autres liens ?
Merci beaucoup pour vos réponses

debnix
Bonsoir
Si je me souviens bien, j'ai fait un truc du même genre pour avoir plusieurs galeries photo ( basées sur jquery) mais impossible de retouver le topic dans le forum !
Le principe était de transformer le code jquery qui travaille sur les id en code qui marche sur des classes .

Désolée de ne pas être plus précise, je continue à chercher le topic ... à moins que cela ne te suffise

Smiley cligne
Modifié par eebee (07 Nov 2008 - 21:37)
Un grand merci pour vos réponses...

J'ai parcouru vos liens et fait quelques tests mais je bloque.
Avec zoom image ( http://eyecon.ro/zoomimage/ ) c'est pas loin de ce que je recherche, à la différence que je ne souhaite pas des images mais des pages web (formulaires, liens...) dans les "popups" !!

J'ai testé des modifs sur la base de zoom image mais sans succès.
Auriez vous d'autres exemples ou pistes ?

J'ai également joué avec les id => class et les # => . mais la encore sans succès... vous pouvez détaillé un peu please ?

Merci encore pour votre aide
Modifié par debnix (12 Nov 2008 - 14:53)
Si tu ça te dérange pas une popin sans effet à l'ouverture et à la fermeture, voilà un code tout simple qui va te permettre de faire ce que tu souhaites.

Le javascript:

$("#openpopin").click(function () {
    $("#popin").css("display","block");
});
$("#closepopin").click(function () {
    $("#popin").css("display","none");
});


Tu places dans ton code html un élément avec l'id #popin 

<a id="openpopin">Ouvrir la popin</a>
<div id="popin">
    <a id="closepopin" href="#">Fermer la popin</a>
    <!--Ton contenu ici-->
</div>


Et voilà un exemple de CSS pour la popin:

#popin{
	display: none;
	z-index: 1000000000!important;
	position: absolute;
	top: 50px!important;
	left:50%; 
	margin-left: -168px;
	height: 550px;
	width: 336px;
	background: #ffffff;
	border: 1px solid #747474;
	overvlow: hidden;
}

Modifié par Peusly (14 Nov 2008 - 11:14)
Merci Peusly....mais ca ne marche pas.... je dois certainement passer à cote de quelques chose... :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>TestPopin</title>
    <style type="text/css" media="all">
#popin{
	display: none;
	z-index: 1000000000!important;
	position: absolute;
	top: 50px!important;
	left:50%; 
	margin-left: -168px;
	height: 550px;
	width: 336px;
	background: #ffffff;
	border: 1px solid #747474;
	overvlow: hidden;
}
    </style>
    <script type="text/javascript">
      $("#openpopin").click(function () {
         $("#popin").css("display","block");
      });

      $("#closepopin").click(function () {
         $("#popin").css("display","none");
      });
    </script>
  </head>

  <body>
    <h1>TestPopin</h1>

    <a id="openpopin" href="#">Ouvrir la popin</a>
    <div id="popin">
      <a id="closepopin" href="#">Fermer la popin</a>
BLABLABLALBLALBLABLAL A
  </div>
    
  </body>
</html>
Il manque le lien vers jquery...

Et je ne sais pas si ça joue en js mais ton html est mauvais : pas de bon doctype, et je ne sais pas si un élément <a> directement dans le body est autorisé.
Modifié par Patidou (14 Nov 2008 - 16:11)
Même avec l'ajout de la ligne : 

    <script type="text/javascript" src="jquery.js"></script>

avec evidement le fichier "jquery.js".... idem

D'autres idées ou liens ?

Merci pour votre aide

<html>
<head>
<style>
#popin{
	[b]display: none;
	z-index: 1000000000!important;
	position: absolute;[/b]
	top: 50px!important;
	left:50%; 
	margin-left: -168px;
	height: 550px;
	width: 336px;
	background: #ffffff;
	border: 1px solid #747474;
	overvlow: hidden;
}
</style>

[b]<script src="http://code.jquery.com/jquery-latest.js"></script>[/b]
<script>
[b]$(document).ready(function(){
	$("#openpopin").click(function () {
		$("#popin").css("display","block");
	});

	$("#closepopin").click(function () {
		$("#popin").css("display","none");
	});
});[/b]
</script>
</head>

<body>

[b]<a id="openpopin" href="#">Ouvrir la popin</a>
<div id="popin">
	<a id="closepopin" href="#">Fermer la popin</a>
</div>[/b]

</body>
</html>


Je t'ai mis les éléments importants en gras.
Modifié par Peusly (14 Nov 2008 - 16:51)
Merci effectivement ca marche ... mais !

Si je veux plusieurs "popin" est ce possible ?
Comment faire sans dupliquer la partie CSS popin2 popin3 ... et la partie JS ?

N'avez vous pas de liens vers un exemple style http://interface.eyecon.ro/demos/windows.html mais avec plusieurs windows possible...

Je ne suis pas sur d'être clair
Merci encore
Sujet clos
Aller à