使用Javascript代码显示POP [英] Showing POP using Javascript code

问题描述

你好朋友，
我正在开发一个应用程序，该应用程序的功能是突出显示与我的词典匹配的单词，而我的问题是显示弹出窗口并显示该特定单词的含义，一切运行正常，但我想在弹出窗口中进行滚动并且位置应该自动计算出来，这在我的代码中不起作用.

问题:弹出窗口的显示位置计算不正确，我需要同时滚动(水平和垂直).

请帮助我解决问题，以下是我使用javascript
的弹出代码
谢谢前进.

Hello Friends,
I am working on an application , functionality of the application is to hightlight the words that matched with my dictionary and my problem is to display popup and display the meaning of that particular word, Everything is running fine but i want to put scrolling in the popup and also position should be auto calculated which is not working in my code.

ISSUE : Popup display position is not calculating correctly and i need scrolling on both (horizontal and vertical).

Please help me how to solve the issue, below is my popup code using javascript

Thanking you advance.

function ShowContent(element) {
   var elem = document.getElementById('divPopUp');
   var root = document.documentElement || document.body;
   //window scroll data
   elementHeight = element.offsetHeight;
   var scrollTop = document.body.scrollTop;
   var scrollLeft = document.body.scrollLeft;
   //window height data
   var windowHeight = window.innerHeight;
   var windowWidth = window.innerWidth;
   //tooltip data
   var tooltipWidth, tooltipHeight;
   //calc height
   elem.style.visibility = 'visible';
   elem.style.display = 'block';
   tooltipWidth = elem.offsetWidth;
   tooltipHeight = elem.offsetHeight;
   elem.style.display = 'none';
   var pos = findPos(element);
   var finalX = pos[0];
   var finalY = pos[1] + elementHeight + 2;
   if (finalX + tooltipWidth >= windowWidth + scrollLeft) {
       finalX = finalX - tooltipWidth;
   }
   if (finalY + tooltipHeight >= windowHeight + scrollTop) {
       finalY = finalY - tooltipHeight - (elementHeight) - 5;
   }

   elem.style.left = finalX + 'px';
   elem.style.top = finalY + 'px';
   elem.style.display = '';
}

推荐答案

看看下面的函数，该函数位于 ^ ]:

Take a look at the function below, found at http://stackoverflow.com/questions/442404/dynamically-retrieve-html-element-x-y-position-with-javascript[^]:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

这篇关于使用Javascript代码显示POP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！