Всплывающее окно для предоставления информации о продуктах

Question

Я хочу, чтобы рядом с важными опциями моего веб-сайта был знак вопроса, чтобы я мог сразу же показать пользователям информацию об этой опции в небольшом всплывающем окне.как это .Нажмите на опцию Set Reminder, чтобы увидеть всплывающее окно.Кто-нибудь может подсказать мне, как они сделали это или что использовали, для этого милого маленького всплывающего окна.

Спасибо:)

Answer 1

Вы можете назвать это всплывающей подсказкой.Есть множество инструментов, которые могут помочь вам достичь этого эффекта.В зависимости от предпочитаемой вами структуры JavaScript, вы можете найти множество плагинов.Вот несколько примеров для платформы jQuery.

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

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

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

Если вы хотите больше, вы можете в Google"jQuery tooltips".

PS: Если вы хотите, чтобы всплывающие подсказки появлялись при событии "click", поэкспериментируйте с файлом javascript выбранной подсказки.

Answer 2

Есть множество инструментов, которые вы можете использовать, включая сотню модальных диалогов для jQuery. Если вам нужно комплексное решение, которое не зависит от CSS-среды, взгляните на Floatbox . Он относительно тонкий, с ним легко работать, а поддержка великолепна.

Answer 3

<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>