Это всё делается посредством html, css, js.
Так называемая панель инструментов делается вручную.
<html>
<head>
<script type="text/javascript">
function show_message(intext)
{
var vis = getClientSTop()
if(!document.getElementById('message'))
{
var message = document.createElement('div');
message.style.position="absolute";
message.style.top=vis+200+"px";
message.style.left="40%";
message.style.width="20%";
message.style.backgroundColor="#FFF";
message.style.border="1px solid #000";
message.style.textAlign="center";
message.setAttribute("id", "message");
document.body.appendChild(message);
var text = document.createElement('div');
var input = document.createElement('div');
input.style.height="26px";
text.borderBottom="1px solid #000";
message.appendChild(text);
text.style.padding="5px";
text.innerHTML=intext;
var button = document.createElement('input');
button.setAttribute("type", "button");
button.setAttribute("value", "OK");
button.style.height="26px";
button.style.border="0px";
button.style.backgroundColor="#37476f";
button.style.color="#fff";
button.style.cursor="pointer";
button.onclick = function()
{
input.removeChild(button);
message.removeChild(input);
message.removeChild(text);
document.body.removeChild(message);
}
input.appendChild(button);
message.appendChild(input);
}
}
function getClientSTop()
{
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop)
}
window.onscroll = function () {
if(document.getElementById('message'))
{
var message = document.getElementById('message');
var vis = getClientSTop();
message.style.top=vis+200+"px";
}
}
</script>
</head>
<body>
<div style="cursor: pointer;" onclick="show_message('Текст текст текст, а можно и картинку, да вообще что угодно. Если учится, учится. учится')">тыкни на меня</div>
</body></html>
