Кнопка, вероятно, позиционируется с использованием фиксированного позиционирования CSS. Фиксированное позиционирование означает, что оно остается на том же месте на экране, а не на странице. Это позволяет ему «плавать» над текстом даже при прокрутке.
Всплывающий диалог такой же. Нажатие на кнопку переключает свойство display CSS между none и чем-то отличным от none, возможно block.
Серый фон, я думаю, создается с большой фиксированной позицией <div> с width:100% и height:100% и некоторой непрозрачностью .
Попробуйте это:
HTML
Сохранить как example.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Example</title>
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>Example</h1>
<a id="clickhere">Click here for the popup!</a>
<div id="main">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<form id="popup" class="dialog" action="#">
<div id="popupbackground"></div>
<div class="dialog">
<h2>Popup!</h2>
<a id="closepopup">Click here to close this dialog</a>
</div>
</form>
</body>
</html>
CSS
Сохранить как example.css:
html {
height:100%;
}
body {
height:100%;
}
form.dialog {
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
text-align:center;
padding-top:10%;
display:none;
}
form.dialog div.dialog {
width:400px;
background-color:gray;
margin:auto;
text-align:left;
border:2px solid black;
padding:10px;
position:relative;
z-index:10;
}
form.dialog label {
display:block;
}
form.dialog input {
width:99%;
}
form.dialog textarea {
width:99%;
height:200px;
}
a {
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
#popup #popupbackground {
background:gray;
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
JavaScript
Сохранить как example.js:
window.onload = function() {
document.getElementById("clickhere").onclick = function() {
document.getElementById("popup").style.display = "block";
};
document.getElementById("closepopup").onclick = function() {
document.getElementById("popup").style.display = "none";
};
};
Идея в том, что <form> потребляет весь экран из-за width
и height свойства в правиле form.dialog. Поскольку в этом правиле также указана фиксированная позиция, пользователь никогда не сможет прокрутить содержимое этого <form>. Затем мы можем центрировать <div class="dialog">, используя margin:auto, чтобы он плавал по центру страницы. <div id="popupbackground"></div> обеспечивает блеклый серый фон.