Question

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

       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");
    }

});

动态设置位置

1 个答案: