fenêtre modale en javascript

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

Résolu fenêtre modale en javascript

Message par demeter1 le 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:

//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;
});

Mis le css dans la feuille de style

Spoiler:
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}


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.





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

demeter1
+ Hyperactif +

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

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

Résolu Re: fenêtre modale en javascript

Message par chipie23 le 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
***

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 le 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
+ Hyperactif +

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

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

Résolu Re: fenêtre modale en javascript

Message par chipie23 le 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
***

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 le Mer 6 Juil 2011 - 11:03

Merci beaucoup Chipie pour cette aide.

demeter1
+ Hyperactif +

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

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

Résolu Re: fenêtre modale en javascript

Message par Adam_sfp le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 le 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.


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.

demeter1
+ Hyperactif +

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

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

Résolu Re: fenêtre modale en javascript

Message par Adam_sfp le 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://illiweb.com/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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: fenêtre modale en javascript

Message par demeter1 le 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.


demeter1
+ Hyperactif +

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

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

Résolu Re: fenêtre modale en javascript

Message par demeter1 le 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.



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

demeter1
+ Hyperactif +

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

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

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


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