Fenêtre pop-up sur le vol stationnaire à l'aide de jquery

OK, d'obtenir très frustrés ici. Je sais ce que je veux faire n'est pas compliqué, mais je ne peux pas trouver une belle réponse simple.

Je veux une fenêtre pop-up quand j'ai survolez l'image. La popup doit être à la droite de l'image.

C'est tout.

Ce est utilisé pour afficher une image sur l'endroit où trouver le CVV# de carte de crédit si elles ne le savent pas déjà.

Je continue de trouver tous ces échantillons qui combinent ce que je suis à la recherche pour avec 18 autres choses en même temps, ce qui rend impossible pour un débutant jquery pour faire le tri.

Je ne veux pas de les combiner en un système de menu, je ne veux pas appliquer ce code à chaque exemplaire d'une certaine étiquette, ni ai-je envie de chanter et de danser.

Je ne crois pas que la popup doit être dans son propre DIV parce que l'image que le déclenchement de la hover est à l'intérieur d'un tableau que je ne veux pas modifier.

Je suis à environ 2 po (5 cm pour mes amis d'outre-mer) à l'abri de juste dire fu-- et de la faire popup dans une nouvelle fenêtre du navigateur. La raison pour laquelle je suis en train de faire de cette façon c'est parce que je pense que c'est un meilleur style, et parce que je veux apprendre jquery.

Si quelqu'un peut s'il vous plaît me l'expliquer en des termes très simples, je préfère de beaucoup l'apprécier. Si vous souhaitez ajouter d'autres fonctionnalités que vous jugez utiles comme les coins arrondis, c'est OK aussi longtemps que je peux dire facilement ce code va avec quoi.

Merci beaucoup.

  • Sauf si vous devez absolument, n'utilisez pas les popups. Vous pourriez facilement vous suffit d'afficher une nouvelle <div> en plus le champ qui a peut-être une image qui indique à l'utilisateur où trouver le numéro CVV.
  • Si vous avez pensé à votre problème et essayé de comprendre les principes de la langue au lieu de la cargaison-sectateur de codage alors, vous auriez vu de le décomposer en parties, telles que: j'ai besoin de faire quelque chose sur le vol stationnaire de x; je puis avoir besoin de trouver de l'invisible y de l'élément que je l'ai déjà caché et de le montrer; lorsqu'il n'est plus planant ...etc. Mais bien sûr, ces foutues complexe tutoriels!
  • si vous avez un ensemble de beaucoup de choses, et vous êtes de nouveau pour elle, il n'est pas toujours simple de disséquer le code.
InformationsquelleAutor Tom Collins | 2013-03-28
  1. 11

    Quelque chose comme ceci peut-être :

    $('.popover').on({
    mousemove: function(e) {
        $(this).next('img').css({
            top: e.pageY - 260,
            left: e.pageX + 10
        });
    },
    mouseenter: function() {
        var big = $('<img />', {'class': 'big_img', src: this.src});
        $(this).after(big);
    },
    mouseleave: function() {
        $('.big_img').remove();
    }
});

    DÉMONSTRATION

    Ou sans javascript, juste CSS : VIOLON

    • OK, je suis très proche. 2 problèmes, je suis en cours d'exécution dans. Tout d'abord, je suis en utilisant différentes images. Un petit point d'interrogation et le diagramme. J'ai changé de cette.src pour le nom de la source et qui a fonctionné, mais je ne sais pas si c'est la bonne façon. Le deuxième, est la position de la plus petite img. Vous l'avez 200,200, mais j'ai changé de 0,0. Tout fonctionne bien à jouer du violon, mais pas sur ma page. Voici mon code: jsfiddle.net/gEt6U
    • Eh bien, je n'ai jamais fait de le résoudre. S'avère que beaucoup de ce que j'essayais de ne travailler en fait quand fait sur une autre page, mais ont été bloqués pour une raison quelconque sur la page que je travaillais. Cette page est un peu compliqué avec un tas de Vrd, peut-être que c'était interférer avec elle. Merci quand même.
    InformationsquelleAutor adeneo
  2. 1

    Woah, chill homme.

    Voici une technique que je vais vous suggérons d'utiliser.

    Ajoutant un <div> à la fin de la <body> comme conteneur pour votre popup. http://jqapi.com/#p=append

    Ensuite, vous avez besoin de connaître les positions de l'endroit où vous voulez le mettre, par rapport au document. Vous pouvez obtenir le décalage de la planait élément à l'aide de jQuery décalage http://jqapi.com/#p=offset

    Alors vous allez calculer la largeur de la planait élément, puis définissez le popup à côté d'elle à l'aide de CSS, position: absolute. Pour définir un contexte de positionnement, il est recommandé de définir position:relative à l'élément parent ainsi, dans ce cas, il est <body>.
    Vous devez définir l'attribut CSS de top et left pour votre popup contenant.

    Suggestion pour le décollage de la mécanique http://jqapi.com/#p=hover

    Vous aurez besoin de créer un hover gestionnaire sous la forme d'une fonction. Une fonction pour "planer" et une option pour "planer" à"

    Il y a un fichier d'amorce de la mise en œuvre de la liste http://twitter.github.com/bootstrap/javascript.html#popovers
    Peut-être à la recherche à la source pourrait vous éclairer.

    Espère que ça aide.

    • Un peu plus que ce que je voulais sur cette question, mais ressemble à un bon tutoriel pour moi de revenir quand j'aurai un peu plus de temps. Merci. P. S. je suis beaucoup plus froid aujourd'hui. 🙂
    InformationsquelleAutor VKen