Question

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

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

编辑：我希望弹出窗口是一个模态弹出窗口。

Answer 1

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

的教程

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

Answer 2

获取您想要具有此效果的元素，循环遍历它们，向每个弹出窗口的事件添加事件侦听器。

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

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

Demo

在元素悬停上使用javascript在弹出窗口中显示网站

2 个答案: