Fade-Out Popup javascript

Fade-Out Popup javascript - HTML/CSS - Programmation

Marsh Posté le 21-03-2013 à 10:49:28    

Bonjour à tous,  
 
en cliquant sur une image, une popup s'affiche au milieu de mon écran,  
 
lorsque celle-ci s'affiche, j'ai réussi à mettre un fade-in, (fond plus foncé sur l'écran derrière)  
 
et j'aimerai lors du clic sur la croix rouge (de la modal dialog) faire un fade-out pour enlever l'opacité.  
 
Je ne sais pas comment m'y prendre. Auriez-vous une idée ?  
 
Voici le code du popup :  
 

Code :
  1. function openPopup(adresse, nomFenetre, largeur, hauteur, scroll) {
  2.                 //Permet de centrer la popup au milieu de l'écran
  3.                 var largeurEcran = (screen.width - largeur) / 2;
  4.                 var hauteurEcran = (screen.height - hauteur) / 2;
  5.                 window.open(adresse, nomFenetre, 'height=' + hauteur + ', width=' + largeur + ', top=' + hauteurEcran + ', left=' + largeurEcran + ', scrollbars=' + scroll + ', resizable')
  6.                 //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
  7.                 $('body').append('<div id="fade"></div>');
  8.                 $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();
  9.             }


 
J'aimerai également, que lorsque je clique sur le body de la fenêtre cad en dehors du popup, celui-ci se ferme. Est-ce possible ?  
 
D'avance merci pour vos réponses.

Reply

Marsh Posté le 21-03-2013 à 10:49:28   

Reply

Marsh Posté le 21-03-2013 à 11:20:57    

si tu veux jouer avec l'opacité, il faut faire une fausse popup: un div
C'est très facile à mettre en palce avec une librairie comme jquery  
En bonus, ça fonctionera mieux et ce sera plus custumizable


---------------

Reply

Marsh Posté le 21-03-2013 à 11:52:38    

Merci pour votre réponse.  
 
Le soucis, c'est que je récupère un ID dans cette fenêtre. Je ne pense pas que ce soit possible avec un "div".  

Reply

Marsh Posté le 21-03-2013 à 11:55:56    

C'est à dire ? récupérer le contenu de  

Code :
  1. <div id="popup">
  2.       <div id="ce-que-je-veux-recuperer-enfin-si-c-est-possible">
  3.             hahah
  4.        </div>
  5. </div>


 

Code :
  1. alert(document.geteElementById('ce-que-je-veux-recuperer-enfin-si-c-est-possible').innerHTML);



---------------

Reply

Marsh Posté le 21-03-2013 à 12:17:13    

Je veux récupérer un ID qui se trouve dans un gridview, afin d'afficher un messga en fonction de cet ID.

Reply

Marsh Posté le 21-03-2013 à 14:17:33    

montre moi le bout de code que tu as pour recuperer ll'id au moment du clic dans le gridview


---------------

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed