Фрейм в модальном окне

На основе скрипта.

Плюс данного способа - то, что всё эстетично и компактно, играйся со стилями да и всё.

Минус - фрейм заранее расположен на странице, он пустой и скрыт, но ЕСТЬ.

Вот весь код 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