Creer une fenetre de type modale personnalisable

Logiciel & apps Programmation
1

onjour,

Voici mon code:

<html>
<head>
.......
<script type="text/javascript" src="js/fonctions.js"></script>

<style type="text/css">
<!--
#conteneur {
	position:absolute;
	left:50%;
	margin-left:-512px;
	top:10px;
	overflow: auto;
	z-index:1;
}
#utilisateurs {
	position:absolute;
	left:23px;
	top:216px;
	width:427px;
	height:130px;
	overflow: auto;
	z-index:1;
}
#nos_vins {
	position:absolute;
	left:487px;
	top:224px;
	width:483px;
	height:121px;
	overflow: auto;
	z-index:1;
}
#actualites {
	position:absolute;
	left:32px;
	top:428px;
	width:933px;
	height:230px;
	overflow: auto;
	z-index:1;
}
#admin {
	position:absolute;
	left:628px;
	top:30px;
	width:301px;
	height:106px;
	overflow: auto;
	z-index:1;
}

-->
</style>
</head>

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="conteneur">
<div id="utilisateurs">...</div>
<div id="actualites">...</div>
<div id="admin">...</div>

<table id="Tableau_01" width="999" height="750" border="0" cellpadding="0" cellspacing="0">
........................................
<a href="utilisateurs_ajouter.php" title="Ajouter un nouvel utilisateur">
        	<img src="images/ajout.jpg" alt="" width="59" height="64" border="0"></a>
........................................
</table>
</div>

</body>
</html>

Je vous explique mon souhait:
je voudrais lorsque je clique sous le lien que s’ouvre une fenetre centré dans ma page qui affiche la page présentée dans le href. Le reste de la page serait grisé et les liens et autres choses présentes seraient bloqués.
Je voudrais faire ça en JS de façon à le transformer en une librairie réutilisable et couplet avec du css pour changer le style de la fenêtre.
Dans l’idéal je voudrais que cela se fasse juste en ajoutant rel=“Mabox” par exemple.

Je connais déja les fonctions de Mootools, mais je cherche à faire la mienne, beaucoup plus simple( sans animation) mais plus formative.

Merci a tous.
Edité le 12/08/2008 à 00:01

2

Je te préconise une solution simple - du moins pour Fx, Opera, et IE7 (je crois) -


.glasspane {z-index: 32766; position: fixed; opacity: 0.75; background: black; top: 0; left: 0; right: 0; bottom: 0; display: none;}
.modalewindow {z-index: 32767; position: fixed; background: white; top: 5%; left: 5%; right: 5%; bottom: 5%; border: 1px solid black; padding: auto;display: none; }

Et pour l’utilisation:

<div class="glasspane" id="glasspane"></div>
<div class="modalewindow " id="modalewindow">BWARG</div>
<script type="text/javascript">
function afficher() {
  document.getElementById('glasspane').style.display = 'block'; 
  document.getElementById('modalewindow').style.display = 'block'; 
}
</script>
<a href="javascript:afficher()">Afficher</a>

Une vraie fenêtre modale ne désactive pas les composants de la page. Elle ne fait jusque rattraper le focus pour éviter qu’on ne les sélectionne.

Ce code devrait éviter la sélection de composant au clic, car tu auras un glasspane - c’est à dire un élément qui prend toute la place - qui cachera tout ce qui traine - qui empéchera de cliquer ailleurs.

Il ne te reste plus qu’à voir ce qui se passe si on fait tab sur la barre d’adresse - à priori, tu devrais pouvoir sélectionner des liens.

.

3

Trés interressant je teste et te tiens au jus :slight_smile:

4

Bon je viens de faire en partie ce que tu m’as dit. Sous FF cela marche niquel.
Sous IE 3 problème persistent:

  • le glasspane ne s’affiche pas
  • j’affiche une page dans mon div, celle ci un un form ou ce trouve un tableau, sous IE le fond n’apparait pas, ni la couleur du texte
  • L’affichage dans le div n’est pas centrer sous IE alors qu’il l’ai sous FF

Si tu veux avoir l’exemple je peux te fournir l’adresse par mp

Merci a toi

5

Si c’est IE6 c’est normal. Si c’est IE7, j’en sais rien :slight_smile:

6

Ce message n’était pas conforme aux règles d’utilisation du nouveau forum :

IE7 :frowning: