Как сделать всплывающее окне


Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне



Всплывающая подсказка в HTML

Согласно

  1. текст отображается, когда не может быть показан объект,
  2. текст отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.
<тег title="всплывающая_подсказка">содержимое</тег> Пример: <a href="http://shpargalkablog.ru/2013/12/title.html" title="про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами">наведи на меня</a> Результат: Пример: <span title="внешний вид зависит от браузера, его нельзя изменить">наведи на меня</span> Результат: наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример: <span onclick="alert('сообщение открывается в модальном окне, вид которого нельзя изменить');">нажми на меня</span> Результат: нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS

Желательное поведение подсказки:

  1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
  2. появляться по центру (слева/справа) наводимого элемента,
  3. адаптироваться к ширине и высоте окна браузера,
  4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
  5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
  6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
  7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру)В статье «» можно увидеть практическое использование, наведи на меня (влево) Важно: , наведи на меня (вправо) Скелет за компьютером Ничто так не воодушевляет, как сознание своего безнадёжного положенияАльбер Камю

Пример с анимацией: наведи на меня Короткая

<style> .tooltip { / стиль текста, наведя или нажав на который появится пояснение / display: inline-block; position: relative; background: #E6E6E6; / / text-indent: 0px; cursor: help; / / } .tooltip > span { / стиль появляющейся подсказки / position: absolute; bottom: 100%; left: -20em; / = max-width / right: -20em; / = max-width / width: -moz-max-content; width: -webkit-max-content; width: max-content; / ширина подсказки может быть не более содержимого / max-width: 20em; / ширина подсказки может быть не более 20em / max-height: 80vh; / необязательное ограничение по высоте подсказки, / overflow: auto; visibility: hidden; margin: 0 auto .4em; / поднята на .4em над текстом, наведя или нажав на который появится пояснение / padding: .3em; border: solid rgb(200,200,200); font-size: 90%; background: #fff; line-height: normal; cursor: auto; } .tooltip.left > span { / начинается от левого края / left: 0; right: -20em; margin: 0 0 .4em; } .tooltip.right > span { / начинается от правого края / left: -20em; right: 0; margin: 0 0 .4em auto; } .tooltip:after { / треугольничек под подсказкой; тут тоже везде .4em / content: ""; position: absolute; top: -.4em; left: 50%; visibility: hidden; margin: 0 0 0 -.4em; border: .4em solid; border-color: rgb(200,200,200) transparent transparent transparent; cursor: auto; } .tooltip.left:after { left: 1em; } .tooltip.right:after { left: auto; right: .6em; / 1em - .4em / } .tooltip:before { / поле между текстом, наведя или нажав на который появится пояснение, и подсказкой нужно чтобы, если перевести курсор мышки на подсказку, та не исчезла; тут тоже везде .4em / content: ""; position: absolute; top: -.4em; left: 0; right: 0; height: .4em; visibility: hidden; } .tooltip:hover > span, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus > span, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; transition: 0s .4s; } .tooltip:focus { / убрать рамку в Хроме / outline: none; } .tooltip.anim > span, .tooltip.anim:after { / анимация / opacity: 0; transform: translateY(1.5em) scale(.3); transform-origin: center bottom; } .tooltip.anim:after { transform: translateY(.7em) scale(.3); / 1.7 = 1.5 / (1.42) / } .tooltip.anim:hover > span, .tooltip.anim:hover:after, .tooltip.anim:focus > span, .tooltip.anim:focus:after { opacity: 1; transition: .6s .4s; transform: translateY(0); } @media (max-width: 20em) { / ширина подсказки может быть не более ширины окна браузера / .tooltip > span { max-width: 100vw; / в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует / box-sizing: border-box; } } </style> <span class="tooltip" tabindex="0">наведи на меня (по центру) <span>Подсказка</span></span> <span class="tooltip left" tabindex="0">наведи на меня (влево) <span>Подсказка</span></span> <span class="tooltip right" tabindex="0">наведи на меня (вправо) <span>Подсказка</span></span> <span class="tooltip anim" tabindex="0">наведи на меня (с анимацией) <span>Подсказка</span></span>

Что нельзя сделать без JavaScript

Желательное поведение:

  1. находится в видимой области окна браузера.

Пример: наведи на меняДаже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

<script> (function(){ function raz(e) { var t = this.getElementsByTagName('span')[0], em = '-20', tR = t.getBoundingClientRect(), tS = getComputedStyle(t, '').fontSize.slice(0, -2), d = document.documentElement.getBoundingClientRect().right - tR.right; if(tR.left < 0) t.style.left = parseInt(tS em - tR.left 2) + 'px'; if(d < 0) t.style.right = parseInt(tS em - d 2) + 'px'; } var tooltip = document.querySelectorAll('.tooltip'); for (var i = 0; i < tooltip.length; i++) { tooltip[i].addEventListener('click', raz, false); tooltip[i].addEventListener('mouseover', raz, false); } })() </script>

Как сделать всплывающую подсказку, появляющуюся рядом с курсором мышки или рядом с тем местом, куда нажал посетитель

  • появляться под курсором,

Источник: http://shpargalkablog.ru/2011/02/vsplyvayushchiye-podskazki.html


Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне

Как сделать всплывающее окне

Читать далее: