Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как создать модальное окно что бы оно выводило фрейм (https://javascript.ru/forum/dom-window/39437-kak-sozdat-modalnoe-okno-chto-ono-vyvodilo-frejjm.html)

olehpdatu 30.06.2013 14:14

Как создать модальное окно что бы оно выводило фрейм
 
Как создать модальное окно что бы оно выводило фрейм???

devote 30.06.2013 14:34

<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>
<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 dolor sit amet, consectetur adipiscing elit. Aliquam facilisis lorem ac dapibus ullamcorper. Pellentesque vestibulum felis eu odio bibendum, <a href="http://javascript.ru" onclick="return showModal(this);">ткни сюда</a>, ut viverra leo vestibulum. Sed a ipsum posuere, egestas mauris vel, porta magna. Mauris malesuada ipsum in lectus auctor, vel venenatis turpis facilisis. Mauris at eros libero. Curabitur eleifend lorem vel feugiat dignissim. Nam non molestie tortor.</p>
<p> Nullam arcu ligula, lacinia et diam ut, euismod congue metus. Nam erat enim, hendrerit at luctus in, vehicula quis turpis. Nulla id quam at nibh lacinia sollicitudin eget dictum massa. Donec ac arcu in dolor scelerisque tempor vel in justo. Sed elit orci, luctus vel magna a, dapibus ultricies nisl. Curabitur nunc lacus, ullamcorper nec libero at, fringilla luctus eros. Mauris faucibus eu risus id interdum. Duis ante quam, volutpat et tristique sed, tristique non nibh.</p>

olehpdatu 30.06.2013 14:46

а как чтобы при переходе по ссылке модальное окно открывалось?

devote 30.06.2013 15:01

Цитата:

Сообщение от olehpdatu
а как чтобы при переходе по ссылке модальное окно открывалось?

Смотри выше код

olehpdatu 30.06.2013 15:06

То что надо!!!!!СПАСИБО БОЛЬШОЕ!!!

olehpdatu 30.06.2013 15:27

Как изменить размеры контента в модальном окне??? Размеры модального окна меняются а когда в стили ставишь
.modal-window-content {
        padding: 5px;
		width:75%;
		height:75%;
    }
контент остается такого же размера.

devote 30.06.2013 15:41

Цитата:

Сообщение от olehpdatu
контент остается такого же размера.

меняйте размер фрейма, а окно само под него подстроиться.

olehpdatu 30.06.2013 16:07

Пример какой то можете скинуть...бо что то не то делаю???? Вставил видео с ютуба окно не изменилось.

olehpdatu 30.06.2013 17:03

Всё гуд.....Получилось сделать!!

Фридрих 24.09.2013 01:39

как сделать для нескольких фреймов??
за ранее спасибо!


Часовой пояс GMT +3, время: 15:38.