Donnerstag, Februar 27, 2020

Popup-Div-Anker bei mouse-hover/Klick

Ich bin neu in Web-Programmierung.

Ich will etwas umsetzen, wie in facebook, wenn wir schweben unsere Maus über den link, ein Pfeil-floating-div, der Anker auf den der link zeigte auf es.

Wie Sie alle Adressen, die Art der Komponente? Die nächstgelegene Bibliothek, die ich gefunden habe ist http://gristmill.github.com/jquery-popbox/ funktioniert Das nicht, irgendwann, in einigen browser. Weitere Suche nach „Popbox“ zeigt keine brauchbares Ergebnis. Kann jemand empfehlen, eine ähnliche Bibliothek, wie der link, den ich gepostet? Es kann mit Jquery, Javascript, CSS, html oder etc.

Anstelle von Bibliothek, kann jemand mir zeigen, wie tun Sie es, ohne mit Bibliothek, in einer einfachsten Weise. Ich möchte nur wissen, die grobe Idee dahinter. Die meisten die Bibliothek kommen, mit komplizierten code, ist schwer zu lernen für Anfänger.

Danke sehr viel im Voraus.

  • +1 für den Wunsch, es zu lernen 🙂
InformationsquelleAutor GMsoF | 2012-11-19

2 Kommentare

  1. 3

    Überprüfen Sie diese arbeiten demo: http://jsfiddle.net/fedmich/Aapw6/

    Müssen Sie erstellen ein Bild der Pfeiltaste nach oben und zentriert in der popup-box, und dann in der Regel verschieben sich die popup-box, um dem Ziel zu Folgen verankern.

    $('.hover').hover(function(){
            var popup_div = $('.popup_div');
            var obj = $(this);
            var offset = obj.offset();
    
            var new_top = offset.top + 30;
    
            var new_left = offset.left;
    
            new_left = new_left - ( popup_div.width() / 2);
            new_left = new_left + ( obj.width() / 2);
    
            popup_div.css('left', new_left + 'px');
            popup_div.css('top', new_top + 'px');
    
            popup_div.show();
        }
        , function (){
            //hovered away so hide popup
            $('.popup_div').hide();
        }
        );

    CSS-code sollte position absolute

    .popup_div{
        position:absolute;
        left:100px;
        top:100px;
        border:1px solid red;
        background-color:blue;
        width:150px;
        height:150px;
        background:url("http://i.imgur.com/zFWft.png") no-repeat scroll center 0 transparent;
        text-align:left;
    }

    man könnte dies über die Positionierung des Ziel-div und dann immer die Mitte, die durch Division der Breite um die Hälfte und indem es auf der linken Seite.

        new_left =  hovered_thing.left + (hovered_thing.width / 2) - (popup_div.width / 2)

    lassen Sie mich Ihnen einige der Geige für diese kurz
    auf einer anderen Anmerkung, obwohl, haben Sie versucht, die hovercards? vielleicht ähnlich zu dem, was Sie tun möchten

    http://designwithpc.com/Plugins/Hovercard

    • Danke für Ihre demo. Es ist einfach genug zu verstehen.
  2. 1

    jquery ui bietet eine dialog Funktion

    die Idee dahinter, dass Sie Ihre Anker zu binden, die es zeigt und verbirgt Sie popup –

    $('#anchor').bind({
        'mouseenter' : function() {
            $('#popUp').show();
        },
        'mouseleave' : function() {
            $('#popUp').hide();
        }
    });

    müssen Sie legen Sie die position des popup zu.
    beachten Sie, dass nur, wenn die popup-divs-display nicht none ist, können Sie $(‚#popup‘).outerWidth()/2 und $(‚#Anker‘).outerWidth() /2

Kostenlose Online-Tests