fenêtre modale en javascript

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu fenêtre modale en javascript

Message par demeter1 Mar 5 Juil 2011 - 22:57

Bonsoir à tous,
Encore du boulot pour les codeurs Embarassed Afin d'utiliser les possibilités du nouveau système d'enregistrement du javascript, j'ai tenté d'installer ce système.

http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/

Bon, je vous avouerai que je nage en pleine choucroute

J'ai installé le code javascript et coché "sur l'index"

Spoiler:

Mis le css dans la feuille de style

Spoiler:


J'installe sur un topic ceci

Code:
<a class="poplight" rel="popup1" href="#?w=500">See Popup in Action - Width = 500px</a>
<div id="popup1" class="popup_block" style="display: block; width: 500px; margin-top: -160px; margin-left: -290px;">
<a class="close" href="#">
<img class="btn_close" alt="Close" title="Close Window" src="http://i43.servimg.com/u/f43/11/93/85/24/close_10.png">
texte text texte texte texte


</div>

Résultat : j'ai le popup qui s'affiche mais sans attendre que je clique sur le lien. L'affichage est direct

fenêtre modale en javascript Sans_t11

J'ai m...... quelque part (très certainement dans l'appel du popup).

Si une âme charitable passait dans le secteur, je lui serai très reconnaissant si elle arrivait à me réorienter pour que ce script fonctionne.

Merci par avance à ceux qui vont tenter de résoudre ce pb.





Dernière édition par demeter1 le Mer 6 Juil 2011 - 15:42, édité 1 fois
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par chipie23 Mar 5 Juil 2011 - 23:21

Bonsoir, si vous avez cocher "sur l'index", n'est il pas logique que cela ne fonctionne pas dans les topics ? Shocked
essayer de cocher sur toutes les pages voir si cela change quelque chose Razz
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 Mer 6 Juil 2011 - 0:28

Bonsoir Chipie, OUps, autant pour moi.

Bon, en cliquant sur toutes les pages, même topo : à la visualisation du topic, j'ai la fenêtre qui est ouverte. Je peux la fermer par le biais du "close" mais impossible de la ré-ouvrir en cliquant sur le lien.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par chipie23 Mer 6 Juil 2011 - 1:18

J'ai bien fait quelques test mais franchement ça dépasse mes maigres connaissances, j'espère que vous trouverez une solution à votre problème Razz
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 Mer 6 Juil 2011 - 11:03

Merci beaucoup Chipie pour cette aide.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par Adam_sfp Mer 6 Juil 2011 - 12:03

Bonjour

Il ne manque pas ?
Code:
$(document).ready(function() {
   //ICI LE SCRIPT Jquery
});
Code:
Directly after the line where you called your jQuery, start a new script tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 Mer 6 Juil 2011 - 13:38

Bonjour Adam,
Merci pour votre intervention qui a fait avancer cette demande d'aide.
Voici le code modifié

Code:
$(document).ready(function() {

//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size

    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value

    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    //Define margin for center alignment (vertical  horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

    return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});

});

Placement sur toutes les pages.

Résultat :
Dés que je vais sur le topic, la fenêtre s'ouvre directement en affichage correct mais sans que je clique sur le lien. L'arriére plan n'est pas masqué également.
fenêtre modale en javascript Das_qu10

Je réussi à fermer la fenêtre mais dés que je clique sur le lien, j'obtiens cette affichage
fenêtre modale en javascript Apras_10

Apparemment, il y a un gros soucis avec le z-index dans une partie du css.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: fenêtre modale en javascript

Message par Adam_sfp Mer 6 Juil 2011 - 14:55

Bonjour

Et avec ceci dans votre post par exemple?

Code:
<a href="#?w=500" rel="popup1" class="poplight">See Popup in Action - Width = 500px</a>
            <!--POPUP START-->
<div id="popup1" class="popup_block">
   <a href="#"><img src="http://2img.net/i/fa/admin/icones/help.png" alt="forum actif help" style="float: right; margin: 50px 0 0 20px;" /></a>
   
  Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo.
    Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p><p><strong>Need HElp?</strong> Check out <a href="http://forum.forumactif.com">Forum Actif</a>
   
</div>

<!--END POPUP-->


Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 Mer 6 Juil 2011 - 15:18

Adam, merci, voila qui résout pas mal de pb. La fenêtre s'affiche maintenant au clic du lien. Subsiste juste un petit soucis toujours au niveau de z-index de l'opacité du fond . Ceci dit, chapeau bas pour avoir résolu cette partie.

fenêtre modale en javascript Sans_t12
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 Mer 6 Juil 2011 - 15:41

De retour.
J'ai fait une petite modification du css en supprimant z-index: 999 dans la partie du css intitulée #fade et cela fonctionne à merveille.

fenêtre modale en javascript Sans_t13

Un grand, très grand merci à tous les intervenants de ce topic. :thanks: ok thumleft
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum