Question

基本上,我试图在点击一组清单项目时使用类似工具的pop。除居民的位置外,所有工作似乎都是罚款。 I m试图使用.offset()来打碎每个清单项目的坐标,以便我能够把烟 d放在与清单项目相对的位置上。我的发言包括以下相关内容、内容和文字。任何帮助都值得赞赏!

HTML:

<ul>
    <li class="checked" title="This is a test popup message">Yada yada yada</li>
    <li class="checked" title="This is another test popup message">Yada yada yada</li>
    <li class="checked" title="This is yet another test popup message">Yada yada yada</li>
</ul>

CSS:

.popup {
    position: absolute;
    width: 300px;
    padding: 20px;
    background: rgba(0,0,0, .5);
    z-index: 10000;
    display: none;
}

JavaScript:

$(document).ready(function() {

activatePopup = function() {
    var popupMarkup =  <div class="popup">  +  </div> ;
    return popupMarkup;
}

$( body ).prepend(activatePopup());

$( .checked ).each(function() {
    // Sets popup text based on title attribute
    var popup = $( .popup );
    var popupText = $(this).attr( title );
    $(this).attr( title ,   );

    //Grabs Position data of trigger element
    var pos = $(this).offset();
    var posTop = pos.top;
    var posLeft = pos.left;


    $(this).click(function() {
        popup.html(popupText);
        if (popup.is(":hidden")) {
            popup.fadeIn( fast );
        } else {
            popup.fadeOut( fast );
        }

        $(this).toggleClass( unchecked );
        $(this).toggleClass( checked );

        setPos(posTop, posLeft);
    });

    setPos = function(top, left) {
        var yPos = (top - 80) +  px ;
        var xPos = (left + 40) +  px ;

        popup.css({ top  : yPos,  left  : xPos});
    }
});
});

Answer 1

审判

//Grabs Position data of trigger element
var pos = $(this).offset();
var posTop = pos.top;
var posLeft = pos.left;

页: 1 职能如下:

   $(this).click(function() {
        var pos = $(this).offset();
        var posTop = pos.top;
        var posLeft = pos.left;

        popup.html(popupText);
        if (popup.is(":hidden")) {
            popup.fadeIn( fast );
        } else {
            popup.fadeOut( fast );
        }

        $(this).toggleClass( unchecked );
        $(this).toggleClass( checked );

        setPos(posTop, posLeft);
    });

应:

友情链接