18043 sujets

Questions générales et questions de débutants

Un lien dans une fenêtre popup qui reste dans le même popup?

Salut,

Il faudrait un peu plus d'infos et surtout le code sur lequel tu travailles actuellement pour pouvoir de donner un coup de main.

Les popups sont-elles chargées par AJAX ou non ?
Si le contenu de la première popup est chargé en AJAX, il faudra utiliser la délégation d'événements pour attacher l'ouverture de la seconde popup à un élément de la première.
voici ma page en ligne:

http://sizepredictor.bivolino.com/msdemo.aspx

si tu clique sur 'Find your size' un popup s'ouvre, dans le popup y'a un bouton, je veux qu'on je clique sur ce bouton, que je reste dans la même fenêtre popup? maintenant quand je clique sur ce bouton, je quitte le popup, et une fenêtre web s'affiche!

Merci!
Ok, tu veux poster un formulaire et avoir le retour du formulaire dans cette même popup.
Utilises-tu une librairie spécifique pour ta popup ? Si oui laquelle ?
c'est un exemple simplifié de ma page, si tu veux tu peux créer une page html et voir l'exemple, merci pour votre aide

<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

<head>
	
 	<title>Design your own shirt: Marks &amp; Spencer MadetoMeasure</title>
<style>
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {

    //Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
        var popURL = $(this).attr('href'); //Retrouver la largeur dans le href

        //Récupérer les variables depuis le lien
        var query = popURL.split('?');
        var dim = query[1].split('&amp;');
        var popWidth = dim[0].split('=')[1]; //La première valeur du lien

        //Faire apparaitre la pop-up et ajouter le bouton de fermeture
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

        //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //On affecte le margin
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });

        //Effet fade-in du fond opaque
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
        //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
        $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn();

        return false;
    });

    //Fermeture de la pop-up et du fond
    $('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  //...ils disparaissent ensemble
        });
        return false;
    });
    });
</script>

</head>
<body >

<a href="#?w=500" rel="popup_name" class="poplight">My Size</a>






<div id="popup_name" class="popup_block">
	<h2>size predector</h2>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<p>Anouar test popup for size productor</p>
	<a href="https://www.youtube.com/">click here</a>
</div>



	
</body>



</html>
Sujet clos
Aller à