在元素悬停上显示带有javascript的弹出式网站

displaying website in popup with javascript on element hover

本文关键字：javascript 弹出式 网站 元素 悬停 显示      更新时间：2023-09-26

我正在尝试在html页面中创建一个动态弹出窗口。当用户悬停一个单词时，弹出窗口将出现。在弹出窗口中，我想调用一个以悬停单词为参数的网页。它不需要处理页面中的每个单词。只需将鼠标悬停在我选择的单词上即可。例如，我在我的html页面中有一个文本"你好，这是一个示例文本"，用户将鼠标悬停在单词"sample"上，将出现一个弹出窗口，在弹出窗口中我将显示以下页面"www.blabla.com/？word=sample"

希望我是清白的。我希望它能够在静态页面上工作。我对javascript很陌生。我甚至不知道从哪里开始，所以任何帮助都将不胜感激。谢谢

编辑：我想弹出是一个模式弹出。

这是非常基本的，请阅读http://www.tizag.com/javascriptT/javascriptevents.php和http://www.w3schools.com/jsref/met_win_open.asp

但我可以告诉你，使用这种方法，浏览器会触发弹出窗口阻止程序。

获取想要具有这种效果的元素，在它们上循环，向每个元素添加事件侦听器，这会弹出一个窗口。

这是一个类似的粗略实现，其中单词周围有类popup：

[].slice.apply(document.getElementsByClassName('popup')).forEach(function (elem){
    elem.addEventListener('mouseover', function (){
        window.open('http://google.com/?q=' + this.innerHTML);
    }, false);
});​

演示

相关文章：