<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
width: 300px;
height: auto;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
}
.popup .close_window {
font-size: 13px;
display: block;
width: 6px;
height: 17px;
position: absolute;
padding: 1px 9px 4px 9px;
top: -15px;
right: -15px;
cursor: pointer;
color: #fff;
font-family: 'tahoma', sans-serif;
border-radius: 50%;
text-align: center;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
background-color: #051fb8;
}
.popup .close_window:hover {
background-color: #FF0000;
border: 1px solid #00385E;
}
.popup .close_window:active {
background: #8f9be0;
}
a[id^="f"]{
cursor: pointer;
display: inline-block;
background-color: #0000FF;
color: #fff;
border-radius: 8px;
padding: 4px 9px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
var objHtml = {
'#f1' : 'содержимое 1 окна',
'#f2' : 'содержимое 2 окна',
'#f3' : 'содержимое 3 окна'
},
close = $(".close_window"),
overlay = $(".overlay"),
modal = $("#modal").add(overlay),
full = $("#modal-full");
$.each(objHtml, function(id, html) {
$(id).click(function(event) {
event.preventDefault();
full.html(html);
modal.css({
"opacity": "1",
"visibility": "visible"
})
})
});
close.add(overlay).click(function() {
modal.css({
"opacity": "0",
"visibility": "hidden"
})
})
});
</script>
</head>
<body>
<p><a id="f1">Ссылка 1</a></p>
<p><a id="f2">Ссылка 2</a></p>
<p><a id="f3">Ссылка 3</a></p>
<div class="overlay" title="окно"></div>
<div class="popup" id="modal">
<div class="close_window">x</div>
<div id="modal-full"></div>
</div>
</body>
</html>