Internal popup
HTML
<a href="drive.ru" class="internal-popup">Link</a>
<div id="popup-frame">
<div>
<a href="#" onclick="$('#popup-frame').hide(); return false;">x</a>
<iframe src="drive.ru" id="popup-iframe" name="popup-iframe"></iframe>
</div>
</div>
CSS
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#popup-frame {
display: nne;
position: fixed;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 1000;
}
#popup-frame:before {
position: fixed;
z-index: -1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(0,0,0, 0.6);
content: "";
}
#popup-frame > div {
position: relative;
float: left;
width: 100%;
height: 100%;
padding: 10px;
padding-top: 30px;
margin: 0px;
box-shadow: 1px 1px 15px 0px rgba(0,0,0, 0.8),
0px 0px 0px 2px rgba(0,0,0, 0.2);
-webkit-box-shadow: 1px 1px 15px 0px rgba(0,0,0, 0.8),
0px 0px 0px 2px rgba(0,0,0, 0.2);
background-color: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
}
#popup-frame > div > a {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
padding: 5px;
font-weight: bold;
font-size: 20px;
line-height: 8px;
font-family: verdana, sans-serif;
color: #333;
text-shadow: 1px 1px 0px rgba(0,0,0, 0.3);
background-color: #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
text-decoration: none;
}
#popup-frame > div > a:hover {
color: #fff;
text-shadow: -1px -1px 0px rgba(0,0,0, 0.3);
background-color: #333;
}
#popup-iframe {
float: left;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
z-index: 1001;
border: 1px solid rgba(0,0,0, 0.3);
}
JavaScript
$("a.internal-popup").click(function() {
// load href-URL in iframe
$("#popup-iframe").attr("src", $(this).attr("href"));
// show popup-DIV
$("#popup-frame").show();
// prevent the original click
return false;
});