Shasoft,
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/shasoft/pen/JKrAmX" />
<style class="cp-pen-styles">
.prefix-Dialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.prefix-Dialog.active {
display: block;
pointer-events: auto;
}
.prefix-Dialog > div {
width: 494px;
position: relative;
margin: 16px auto;
padding: 16px 16px 13px 16px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
/* формируем кнопку закрытия */
.prefix-close {
position: absolute;
top: -10px;
right: -10px;padding: 0;
width: 20px;
height: 20px;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 20px;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
.prefix-close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.prefix-close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
</style></head><body>
<html>
<head>
<title>Creating a modal window with HTML5 & CSS3</title>
</head>
<body>
<a href="#" class="prefix-open">Открыть модальное окно через JS</a>
<div id="Modal" class="prefix-Dialog">
<div>
<h3>Заголовок</h3>
<div class="prefix-tabs">
данные окна
</div>
<a class="prefix-close" title="Закрыть" href="#close"></a>
</div>
</div>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', openModal, false);
function openModal() {
[].forEach.call(document.querySelectorAll('.prefix-open, .prefix-close'), function(item) {
item.addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('#Modal').classList.toggle('active');
});
});
}
</script>
</body></html>
Вообще я в дизайне не очень, поэтому модальное окошко сборное из нескольких копипастов.
