动态设置位置

Question

我想要弹出窗口，然后隐藏和显示这个。这就完成了 然后我使标签动态化，并使用该标签显示弹出窗口 但现在我的主要问题是将屏幕弹出窗口设置为 屏幕被移动弹出窗口将看到屏幕的大小，它 根据上/下调整。我已经尝试找到 offsetHeight， 弹出窗口的偏移宽度，但它无法正常工作。 如果您有任何想法，请提供帮助。我提供代码以便您 能理解我的问题。

       public static native void hello()
        /*-{

                 var id=Math.floor((Math.random()*100)+1); 
                 var label=$doc.createElement("Label");
                var labelText = $doc.createTextNode("CLICK ME :: "+id);
                label.id=id;

               label.appendChild(labelText);

               body.appendChild(label);     

              var popup=$doc.createElement("div");
              var popuptext=$doc.createTextNode(".....");
              popup.className="pop";

              popup.appendChild(popuptext);

                     var hideDelayTimer=null;
                     var hideDelay=100;

        label.addEventListener("mouseover",function(e)
                     {      


                 if(hideDelayTimer)
                 clearTimeout(hideDelayTimer);
                 label.appendChild(popup);
                 var position= popup.offsetTop;
                 var width=popup.offsetWidth;
                 var width1=label.offsetWidth;
                 var position1=label.offsetHeight;
                 var position2=label.offsetTop;
                 var positionpop=popup.offsetHeight;

                 height=position-positionpop;

                 if(height<=0||height<positionpop)
                 {
                     alert("no change");
                 }

                 else
                 {   
                       hehe=height-80;
                       alert(hehe);
                      if(height>0 && height>=positionpop)
                      { 
                        popup.setAttribute("style","top:"+hehe+"px");
                        alert("bye");
                      }
                 }

          });

         label.addEventListener("mouseout",function()
           {

                  hideDelayTimer=setTimeout(function()
                 {
                      label.removeChild(popup);

                 },hideDelay);

           });   
    }-*/;

这是我的 CSS 代码。

         .pop
    {
        border:1px solid black ;
        width:500px;
        height:140px;
       background-color: #d1d4d5;
       position:absolute;
       z-index: 1;
       cursor:pointer;
    }       

Answer 1

您的代码中有一个问题。您不能直接在 GWT JSNI 中引用 body。欲了解更多信息，请查看Writing Native JavaScript Methods in GWT

使用

$doc.body.appendChild(label);

而不是

body.appendChild(label);

---

--编辑--

示例代码：

label.addEventListener("mouseover", function(e) {

    if (hideDelayTimer)
        clearTimeout(hideDelayTimer);
    label.appendChild(popup);

    var labelHeight = label.offsetHeight;
    var labelTop = label.offsetTop;
    var windowHeight = $wnd.innerHeight;
    var popupHeight = popup.offsetHeight;

    if (labelTop + labelHeight + popupHeight > windowHeight) {
        popup.setAttribute("style", "top:" + (labelTop - popupHeight)
                + "px");
    }

});