begin process at 2012 02 06 02:06:46
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > FENETRE DE LOGIN

FENETRE DE LOGIN


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Fenêtre & Pop-up Classé sous :login, fenetre login, connexion Niveau :Débutant Date de création :18/06/2009 Date de mise à jour :09/05/2011 17:54:04 Vu / téléchargé :10 879 / 1 559

Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (28)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
une fenetre de login il ne manque que la gestion du login et du passe le js et le CSS sont sépare du html la position de la fenetre s'adapte au redimensionnement et au scroll compatible ie 6 a 8 ff opera safarie chrome
++

Source

  • //-------------------------------------------------------------
  • // Nom Document : voile login
  • // Auteur : kazma (kamel A)
  • // Objet : voile login http://www.javascriptfr.com/
  • // Création :18.06.2009
  • //-------------------------------------------------------------
  • // Mise à Jour : 09.05.2011
  • // Objet : mise a jour ie 9 et optimisation
  • //-------------------------------------------------------------
  • //-(*)------------------
  • var klog={
  • regul:0,
  • quit:function(){
  • clearInterval(klog.regul);
  • document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
  • document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
  • },
  • sscro:function(){
  • var dde=document.documentElement;
  • var ddl=(navigator.vendor) ? document.body : document.documentElement;
  • if(parseInt(navigator.userAgent.substring(30,31))<=7){
  • var dico=document.getElementById('divco');
  • dico.style.height=dde.clientHeight+ddl.scrollTop+"px";
  • dico.style.width=dde.clientWidth+ddl.scrollLeft+"px";
  • }
  • var adi=document.getElementById('cadre');
  • adi.style.left=((dde.clientWidth-adi.offsetWidth)/2)+ddl.scrollLeft+'px';
  • adi.style.top=(dde.clientHeight-adi.offsetHeight)/2+ddl.scrollTop+"px";
  • },
  • logdial:function(){
  • if(arguments.length==0){
  • klog.creation('div','body','id','divco');
  • var dico=document.getElementById('divco');
  • var dde=document.documentElement;
  • var ddl=(navigator.vendor) ? document.body : document.documentElement;
  • dico.onclick=klog.quit;
  • dico.style.height=dde.clientHeight+ddl.scrollTop+"px";
  • dico.style.width=dde.clientWidth+ddl.scrollLeft+"px";
  • var hou=0;
  • }
  • else{
  • var hou=arguments[0];
  • }
  • if(hou<=0.5){
  • hou+=0.1;
  • if(parseInt(navigator.userAgent.substring(30,31))<=8){
  • document.getElementById('divco').style.filter = 'alpha(opacity='+(hou*50)+')';
  • }
  • else{
  • document.getElementById('divco').style.opacity=hou;
  • }
  • }
  • else{
  • klog.boite();
  • return false
  • }
  • setTimeout('klog.logdial('+hou+')',30);
  • },
  • raz:function(){
  • document.getElementById('cadre').getElementsByTagName('input')[0].value='';
  • document.getElementById('cadre').getElementsByTagName('input')[1].value='';
  • },
  • creation:function(elem,parent){
  • var ddc=(arguments[1]=='body') ? document.body : document.getElementById(parent)
  • var constrution=document.createElement(elem);
  • if((arguments.length>2)){
  • var arle=2
  • while (arle<arguments.length){
  • if((arguments[arle]=='txt')){
  • constrution.appendChild(document.createTextNode(arguments[arle+1]))
  • }
  • else if((arguments[arle]=='class')){
  • constrution.className=arguments[arle+1]
  • }
  • else{
  • constrution.setAttribute(arguments[arle],arguments[arle+1]);
  • }
  • arle+=2
  • }
  • }
  • return ddc.appendChild(constrution)
  • },
  • boite:function(){
  • klog.creation('form','body','id','cadre',"method",'POST','action','index.php'); //la page de redirection//
  • klog.creation('span','cadre','class','textelog','txt','LOGIN : ');
  • klog.creation('div','cadre','class','im3').onclick=klog.quit;
  • klog.creation('input','cadre','name','log','class','log');
  • klog.creation('input','cadre','name','psw','class','psw','type','password');
  • klog.creation('span','cadre','class','texpas','txt','MOT DE PASSE :');
  • klog.creation('div','cadre','id','texte2');
  • klog.creation('span','texte2','class','txt1','txt','Annuler').onclick=klog.raz;
  • klog.creation('span','texte2','class','txt2','txt','Ok').onclick=gestion_pass;
  • klog.regul=setInterval(klog.sscro,50);
  • }
  • }
//-------------------------------------------------------------
//  Nom Document : voile login
//  Auteur       : kazma (kamel A)
//  Objet        : voile login   http://www.javascriptfr.com/
//  Création     :18.06.2009
//-------------------------------------------------------------
//  Mise à Jour  : 09.05.2011
//  Objet        : mise a jour ie 9 et optimisation
//-------------------------------------------------------------
//-(*)------------------

var klog={

regul:0,

quit:function(){
clearInterval(klog.regul);
document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
},

sscro:function(){
var dde=document.documentElement;
var ddl=(navigator.vendor) ? document.body : document.documentElement;
if(parseInt(navigator.userAgent.substring(30,31))<=7){
var dico=document.getElementById('divco');
dico.style.height=dde.clientHeight+ddl.scrollTop+"px";
dico.style.width=dde.clientWidth+ddl.scrollLeft+"px";
}
var adi=document.getElementById('cadre');
adi.style.left=((dde.clientWidth-adi.offsetWidth)/2)+ddl.scrollLeft+'px';
adi.style.top=(dde.clientHeight-adi.offsetHeight)/2+ddl.scrollTop+"px";
},

logdial:function(){

if(arguments.length==0){
klog.creation('div','body','id','divco');
var dico=document.getElementById('divco');
var dde=document.documentElement;
var ddl=(navigator.vendor) ? document.body : document.documentElement;
dico.onclick=klog.quit;
dico.style.height=dde.clientHeight+ddl.scrollTop+"px";
dico.style.width=dde.clientWidth+ddl.scrollLeft+"px";
var hou=0;
}
else{
var hou=arguments[0];
}
if(hou<=0.5){
hou+=0.1;
if(parseInt(navigator.userAgent.substring(30,31))<=8){
document.getElementById('divco').style.filter = 'alpha(opacity='+(hou*50)+')';
} 
else{
document.getElementById('divco').style.opacity=hou;
}
}
else{
klog.boite();
return false
}
setTimeout('klog.logdial('+hou+')',30);
},

raz:function(){
document.getElementById('cadre').getElementsByTagName('input')[0].value='';
document.getElementById('cadre').getElementsByTagName('input')[1].value='';
},


creation:function(elem,parent){
var ddc=(arguments[1]=='body') ? document.body : document.getElementById(parent)

var constrution=document.createElement(elem);
if((arguments.length>2)){
var arle=2
while (arle<arguments.length){

if((arguments[arle]=='txt')){
constrution.appendChild(document.createTextNode(arguments[arle+1]))
}
else if((arguments[arle]=='class')){
constrution.className=arguments[arle+1]
}
else{
constrution.setAttribute(arguments[arle],arguments[arle+1]);
}

arle+=2 
}
}
return ddc.appendChild(constrution)
},

boite:function(){

klog.creation('form','body','id','cadre',"method",'POST','action','index.php');		//la page de redirection//
klog.creation('span','cadre','class','textelog','txt','LOGIN : ');
klog.creation('div','cadre','class','im3').onclick=klog.quit;
klog.creation('input','cadre','name','log','class','log');
klog.creation('input','cadre','name','psw','class','psw','type','password');
klog.creation('span','cadre','class','texpas','txt','MOT DE PASSE :');
klog.creation('div','cadre','id','texte2');
klog.creation('span','texte2','class','txt1','txt','Annuler').onclick=klog.raz;
klog.creation('span','texte2','class','txt2','txt','Ok').onclick=gestion_pass;
klog.regul=setInterval(klog.sscro,50);
}
}

 Conclusion

ping pong tique tongue

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

18 juin 2009 23:06:12 :
centrage css
18 juin 2009 23:09:23 :
centrage css
20 juin 2009 11:19:24 :
petite modif
20 juin 2009 13:28:39 :
prise en charge de ie 5.5
01 août 2009 18:52:38 :
mise a jour pour firefox 3.5
17 août 2009 21:55:59 :
optimisation
20 août 2009 22:22:22 :
optimisation
21 août 2009 21:24:05 :
petite modif
21 août 2009 21:26:21 :
petite modif
17 octobre 2009 22:07:57 :
abandon du support de IE 5 (trop vieux) réglage du problème sur ie l'input n'était pas de type password.
23 juin 2010 20:58:48 :
arrivé progressive du voile
18 août 2010 16:31:47 :
modif du designe
08 mars 2011 17:58:57 :
estetisme
06 mai 2011 12:30:36 :
ajout de name pour les input
09 mai 2011 17:54:05 :
mise a jour ie 9 deboguage et optimisation

 Sources du même auteur

Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Source avec Zip CONVERTISSEUR D'IMAGE BASE 64
Source avec Zip Source avec une capture HTML5 PLAYER

 Sources de la même categorie

Source avec Zip Source avec une capture POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE... par phidelum
SFR WIDGET ET JQUERY par hhoareau
Source avec Zip JOLIE ALERTE AVEC "ALERT()" par heycraft
Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CLAVIER NUMERIQUE SECURISÉ par kazma
Source avec Zip Source avec une capture MOT DE PASSE EN HTML par kazma
Source avec Zip MOT DE PASSE PAR LOGIN ET PASSWORD par HTMLer
CONNEXION SERVEUR FTP par maquisard

Commentaires et avis

Commentaire de jdmcreator le 22/06/2009 04:26:20

Bonjour,

Peut-être mettre le champ pour le mot de champ en champ de type password (<input type=password>)

Sinon bravo ;)

JDMCreator

Commentaire de kazma le 22/06/2009 13:16:22 administrateur CS

c'est faisable sauf pour IE qui ne supporte pas la modification d'un input par setAtribute

Commentaire de SapherEmbended0 le 01/07/2009 07:43:04

Merci, sa va me servir, je trouve le code juste un peu long

Commentaire de kazma le 03/07/2009 13:36:21 administrateur CS

il est un peu long car j'ai essayer de faire en sorte qu'il soit complet et compatible

Commentaire de kazma le 17/08/2009 21:57:21 administrateur CS

finalement j'ai rétréci le code

Commentaire de kazma le 20/08/2009 22:23:10 administrateur CS

et encore rétréci

Commentaire de davidblanchet13 le 28/08/2009 21:14:56

Mhh... comment faire pour changement la redirection de index.php à index.htm ?!?!????

Merci bcp les gars ;)

Commentaire de kazma le 28/08/2009 22:31:43 administrateur CS

quand l'utilisateur clic sur le bouton sa renvoi a la fonction que j'ai appele gestion_pass() qui se trouve dans le fichier html il te suffit de mettre document.location.href='index.html'
et de ne pas faire de submit du formulaire


function gestion_pass(){
var glo=document.getElementById('log').value
var wsp=document.getElementById('psw').value
alert('le login est "'+glo+'" et le passe est "'+wsp+'",redirection vers index.php')
quit()
document.location.href='index.html'
}

Commentaire de davidblanchet13 le 28/08/2009 22:40:42

Oh suis je con !! lol impek ! Merci bcp ;)

Commentaire de davidblanchet13 le 28/08/2009 23:09:31

Grosse galère... c'est bien ici que jpeux définir un nom d utilisateur et le mot de passe :
-> login.js
->     createxte('textelog','login : cacaaa');
createxte('texpas','mot de passe : enfoiré');

??? Le truc c'est que je peux quand meme accéder à ma page index.htm en laissant les 2 espaces (user/psw) libres et en n'appuyant que
sur Enter !

Merci ! ;)

Commentaire de kazma le 29/08/2009 10:58:05 administrateur CS

modifie la fonction gestion_pass()de cette maniere
et si tu a bien suivi le login c'est coucou et le passe c'est bipbip

function gestion_pass(){
var glo=document.getElementById('log').value
var wsp=document.getElementById('psw').value
if(glo=='coucou' && wsp=='bipbip'){
quit()
document.location.href='index.html'
}
else{
alert('echec a la connexion')
}
}

Commentaire de davidblanchet13 le 30/08/2009 01:14:26

Impek ! Merci bcp ! Mnt... dernier petit problème je pense.... Comment faire pour éviter qu'au simple clic sur "Enter" , on parvienne à accéder à la page index.htm ????!!

Merci bcp de ton aide ! ;)

Commentaire de crast460 le 05/09/2009 17:28:04 10/10

Merci mais j'aimerais que dans index.php une phrase indique :
Vous êtes bien connecté ( et là son login ).
Et qu'il soit connecté partout sur le site
Merci

Commentaire de jdmcreator le 05/09/2009 19:37:13

Bonjour,

@ Crast460 : Utilise les cookies pour qu'il soit connecté partout sur le site ;)

++

JDMCreator

Commentaire de crast460 le 05/09/2009 20:06:59

quel sont les cookies ?

Commentaire de jdmcreator le 05/09/2009 20:35:05

Crée un sujet sur le forum et envoie moi l'adresse par Message Privé et je t'y répondrai là ;)

Commentaire de manuruben le 14/10/2009 14:11:01

c ou se place la base de donnée comportant les champs login et mot de passe?
sil vous plait aider moi

Commentaire de kazma le 17/10/2009 22:15:45 administrateur CS

finalement j'ai regle le probleme pour Ie de l'input qui n'etait pas en type password c'etait du au fait que j'inserait l'input dans le document et que ensuite je modifiait le type en password et ie est incapable de modifier un input existant la modification doit etre faite avant de l'insere dans le document.

Commentaire de benja13280 le 01/11/2009 15:26:27

moi, je modifie login & pass et ca fé ca :
                     ----------------------------------
                    |                                  |
             login : XXXXXXXXX [Il faut taper le login]|
                    |                                  |
      mot de passe : XXXXXXXXX [Il faut taper le code] |
                    |                                  |
                     ----------------------------------
(ce qui n'est pas dans le cadre dépasse)

Commentaire de rinuom99 le 01/05/2011 13:16:36

j'arrive pas récupérer les valeurs login et psw sur dans une page php pour vérifier l'existence de l'utilisateur sur la base de données

ma page de redirection est login.php ou on trouve :

if (isset ($_POST['psw']))
$psw =$_POST['psw'];

Commentaire de kazma le 01/05/2011 19:09:39 administrateur CS

dans le fichier login.js tu doit modifier la page pour la redirection dans le script c'est index.php

dvg.setAttribute("action",'index.php');

j'ai mis un commentaire sur cette ligne pour quelle soit facilement reperable

Commentaire de rinuom99 le 01/05/2011 21:34:55

ce que j'ai fais, mais ça n'a pas marché

Commentaire de kazma le 01/05/2011 22:49:42 administrateur CS

et a tu inserer la foction gestion_pass en ne conservant que la ligne qui effectu le submit


function gestion_pass(){

document.getElementById('cadre').submit()

}

Commentaire de rinuom99 le 01/05/2011 23:59:01

oui et aussi ça marche pas

Commentaire de rinuom99 le 05/05/2011 21:56:41

est-ce que ça marche chez toi ?

Commentaire de kazma le 06/05/2011 12:27:43 administrateur CS

j'ai refait des modif et tester le tout le problème venait du fait que les input (psw et log) n'avaient pas de nom (name) je vais mettre la source a jour

la page php que j'ai utiliser pour faire le teste

<head>
<title>Codes d'accès</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
    
     <?php
if (isset($_POST['psw']) AND $_POST['psw'] == "coucou")
{

?>
<p><strong>le code est correcte</strong></p>
<br>
<?php
echo $_POST['psw'];
?>
<p>
<?php
echo $_POST['log'];
?>
</p>
        <?php
}
else
{
echo '<p>le code est incorrecte</p>';
}
?>
</body>
</html>

Commentaire de rinuom99 le 06/05/2011 16:06:33

merci beaucoup

Commentaire de vargas le 17/11/2011 15:20:22

Bonjour tout d'abord merci à KAZMA pour login.

maintenant je voudrais faire une fenêtre d'inscription pareil à celle du login, j'arrive à ajouter des nouveaux inputs, mais mon cadre reste de la même grandeur, donc les nouveaux inputs s'affichent en dehors du cadre.

est-ce que quelqu'un peut me dire comment modifier le code pour redimensionner le cadre du login.

merci

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Login/mdp [ par shadow578 ] salut, J'ai trouvé sur internet un petit script bien symaps qui permettrai la connexion par login/mdp. Donc il se compose de un HTML: [code=html] <!D perte de connexion [ par majong ] bonjour il y a certain site où je ne peux pas me connecter à des tranches d'horraire précises de la journée (les cookies doivent etre acceptés comme r cadre connexion comme twitter ? [ par dodwan ] Bonjour à tous J'aurai besoin d'aide pour faire quelque chose de similaire à http://twitter.com/ en haut à droite, pouvoir cliquer sur connexion puis fenetre d'Authéntification [ par midoxe ] Bonjour tt l monde... j'ai crée une fentre d'Authentification avec un login et mot de passe qui marche très bien,mais je veux juste qu'elle affiche pop-up comme lorsque l'on clique sur le lien en haut du site "connexion" [ par spacedelta ] Bonjour, Comment fait-on pour créer un pop-up qui ne démarre pas dans une nouvelle fenêtre mais qui démarre dans le même onglet comme lorsque l'on veu login sous forme de logiciel [ par jkai ] Bonjour à tous, je suis nouveau sur le forum et j'aimerais savoir si c'est possible de créer une fenêtre de login qui renvoi les identifiants et mot problème avec la l'authentification....Urgent [ par hakimjije ] Voici mon formulaire [code=php] Login: <br Besoin d'aide svp [ par taraktorr ] Bonjour à tous j'ai un gros problème et je sollicite votre aide.[^^sad1] Je suis entrain de réaliser une application web avec laquelle on pourra rése calcul checkum d'un login et passe [ par jeanloudwicg ] Bonjour, J'ai un script qui demande à l'ouverture d'une page un login et un mot de passe. Je ne suis vraiment pas bon en programmation en général et Fenêtre Javascript avec 2 zones input !!!!! [ par midoxe ] Bonjour, les amis je cherche à utiliser une fenêtre javascript qui contient 2 zones input pour que je demande à l'utilisateur de rentrer son login a


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,889 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales