11521 sujets

JavaScript, DOM et API Web HTML5

Ouvrir popup au clic sur un lien (a) jquery

Bonjour à tous,

J'ai un souci d'ouverture de ma popup en cliquant sur un lien.
J'ai mis un paramètre sur le lien que je récupère avec $_GET.
Ce que j'aimerais faire c'est quand je clic que ça ouvre une popup qui affiche le contenu de la page du lien cliqué.

Mais quand je clique sur le lien il m'affiche sur la popup "Undefine" et je ne vois le contenu. L'url ne change pas aussi. Si je fais un clic droit sur le lien et que je l'ouvre sur un nouvel onglet avec le paramètre de l'url, là il m'affiche bien la popup avec son contenu.

Je pense avoir compris le problème mais je ne sais pas le résoudre. En fait j'essaye de réaliser 2 actions en même temps : cibler le lien via son (id) en jQuery pour qu'il réalise l'action d'afficher la popup au clic et aussi récupérer le paramètre de l'url car le contenu de la popup se trouve sur lien. Il faut pour cela que je me redirige sur l'url pour ensuite afficher la popup.

Et le 2ème problème est de pouvoir bouger ma popup verticalement quand je scrolle avec la souris. Pour l'instant ma popup reste fixe pourtant elle est en position "absolute" et non "fixed".

Je vous montre un aperçu de mon code.

// Lien :

<a id="lien" href="index.php?action=<?=$id_user;?>">Mon lien</a>

   // Bloc popup :

<div class="popup">
         <p>Affiche contenu popup</p>
</div>




 // jQuery :

$('document').ready(function(){
       $('.popup').hide();
       $('#lien').click(function(){
            $('.popup').show();
       });
});




// PHP

if(isset($_GET['id_user']) {
      // Ma requête qui affiche le contenu popup
      $sql = SELECT * FROM user WHERE user_id = '"$id_user"';
}


Merci par avance !
Bonjour,

Pour ton premier problème, je pense comprendre ce que tu essaies de faire, et par conséquent je comprends pourquoi cela ne peut pas fonctionner.
En fait, tu essaies d'ouvrir une popup avec à l'intérieur le contenu de la page passée en lien (href) ?

Si c'est bien ça que tu veux faire, il manque effectivement un bout de code (la magie n'aidant pas ici Smiley cligne ), il te faut charger le contenu de ta page en ajax, l'injecter dans ta div.popup, et enfin l'afficher, un truc comme ça :
var $popup = $(".popup")
$popup.hide(0)

$('#lien').click(function(e){
  e.preventDefault()
  var lien = $(this).attr('href')
  $popup.load(lien, function(){
    $popup.show()
  })
})


EDIT : pour ton second problème, il manque le CSS pour l'on puisse t'aiguiller au mieux.
Modifié par SolidSnake (21 Apr 2016 - 10:15)
Bonjour SolidSnake,

Merci d'avoir pris le temps de me répondre. Par contre ton code je l'ai testé mais il ne marche pas.

Pour le css voici le code :


    .popup_view {
           font-family: Trebuche MS, Verdana, Arial, sans-serif; 
           font-size: 16px; 
           line-height: 35%; 
           width: 650px; 
           height: auto; 
           position: absolute; 
           left: 50%; 
           margin-left: -325px; 
           padding: 0px 30px 10px; 
           z-index: 300; 
           background: #fff; 
           box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.2); 
           border-radius: 10px; 
           text-align: center;
      }
Tu as des erreurs dans la console ?

EDIT : pour le CSS, le truc étrange, c'est que tu as une classe popup dans l'HTML et popup_view dans le CSS...
Modifié par SolidSnake (25 Apr 2016 - 10:18)
Sujet clos
Aller à