提供有关产品信息的弹出窗口

Question

我希望在我网站的重要选项旁边有一个问号，这样我就可以在一个小的弹出窗口中向用户显示有关该选项的信息。

我希望有一个像 this 这样的弹出窗口。单击“设置提醒”选项以查看弹出窗口。谁能指导我他们是如何制作这个或他们使用了什么来制作这个漂亮的小弹出框。

谢谢 ：）

Answer 1

您可以使用许多工具，包括一百个 jQuery 模式对话框。如果您想要一个不依赖于 CSS 框架的全面解决方案，请查看 Floatbox。它相对纤薄，易于使用，并且支持很好。

Answer 2

<script>
function showpopup(id) {
d = document.createElement('div');
d.style.position = 'absolute';
d.style.height = '100px';
d.style.width = '100px';
d.innerHTML = '<p>Testing...</p>';
d.setAttribute('style', d.getAttribute('style') + 'background-color: blue;');
d.style.top = '' + (document.getElementById(id).style.top - 100);
d.style.left = '' + (document.getElementById(id).style.left - 50);
document.body.appendChild(d);
}
</script>
<a href='#' id='l1' onclick='showpopup("l1");'>aalsdkfj</a>

Answer 3

您可以将其称为工具提示。有大量工具可以帮助您实现这种效果。根据您首选的 JavaScript 框架，您可以找到许多插件。这里有一些 jQuery 框架。

http://flowplayer.org/tools/tooltip/index.html

http://plugins.learningjquery.com/cluetip/demo/

http://craigsworks.com/projects/qtip/demos/

如果你想要更多，你可以google “jQuery 工具提示”。

PS：如果您希望工具提示出现在“单击”事件上，请使用您选择的工具提示的 javascript 文件。