Фрейм в модальном окне
На основе скрипта.
Плюс данного способа - то, что всё эстетично и компактно, играйся со стилями да и всё.
Минус - фрейм заранее расположен на странице, он пустой и скрыт, но ЕСТЬ.
Вот весь код HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.modal-window {
display: none;
position: absolute;
z-index: 100;
background: #eee;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 5px #000000;
left: 30%;
top: 30px;
}
.modal-window-close {
position: absolute;
font-size: 10px;
cursor: pointer;
right: 4px;
top: 4px;
}
.modal-window-title {
text-align: center;
}
.modal-window-content {
padding: 5px;
}
</style>
<script type="text/javascript">
function showModal(self) {
var modal = document.getElementById('modalWindow');
var iframe = modal.getElementsByTagName('iframe')[0];
iframe.src = self.href;
modal.style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="modalWindow" class="modal-window">
<div class="modal-window-close" onclick="this.parentNode.style.display='none';">Закрыть</div>
<div class="modal-window-title">Я модальное окно)</div>
<div class="modal-window-content">
<iframe src="about:blank" frameborder="0"></iframe>
</div>
</div>
<p>Lorem ipsum, <a href="http://javascript.ru" onclick="return showModal(this);">ткни сюда</a>, ut viverra leo vestibulum.</p>
</body>
Ссылки и благодарности
Взято с форума javascript.ru