fenêtre modale en javascript

[demeter1]

Bonsoir à tous,
Encore du boulot pour les codeurs 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



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.

[chipie23]

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

[demeter1]

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.

[chipie23]

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

[demeter1]

Merci beaucoup Chipie pour cette aide.

[Adam_sfp]

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.

[demeter1]

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.


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


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

[Adam_sfp]

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.

[demeter1]

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.

[demeter1]

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.



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