Señor Popov. Попов Александр Степанович, портрет, гравюра.

Hello my friend!

Señor Popoff

Popoff runs tooltips, dropdowns, hover cards, modals and sidebars, on the platform's own popover and dialog: the markup says what is what.

Cases

Each is plain markup: a title, a popover, an interestfor, a <dialog>.

Effects

CSS's own: a transition from @starting-style.

A hover card: shown while the pointer or the focus rests on what it's for.

Modal

A <dialog closedby="any"> opened with showModal(): Esc closes it, and so does a click on the page around it.

Sidebar

A modal set at an edge, a side of the page at random each time.

Draggable

A dialog opened with show(), no backdrop, its head dragged with a few lines of the page's own.

Tall modal

When there is too much content in a modal, it's comfortable to have the page's scroll go to the modal. That is what you see here: the window scrolls the modal, the page under it holds still.

Alexander Popov showed his receiver of electromagnetic waves to the Russian Physical and Chemical Society in Saint Petersburg on 7 May 1895, a coherer that caught the waves of distant lightning and rang a bell. Russia keeps that day as Radio Day.

The coherer, a glass tube of metal filings between two electrodes, conducts once a wave passes through it, and stays so till it's shaken. Popov's receiver tapped it back with the same bell that rang, so it was ready for the next wave.

With an antenna raised on a mast and the far end of the coherer earthed, the receiver heard distant storms. Turned to a sender's sparks, it took telegraph messages, and in 1900 its stations relayed the messages that brought the rescue of fishermen carried away on an ice floe in the Gulf of Finland.

The same years saw Marconi's work in Britain and Tesla's in America, each claiming the wireless. Popov never patented his.

Popoff 2 drew its own overlays and moved the page into them to scroll a tall modal like this one; the browser now has the dialog, its backdrop and its top layer, so popoff 3 draws none.

Scroll down: the page behind stays where it was.

The end.