Хаки и Скрипты Next Generation CMS

Модальное окно с фреймом

irbees2008 irbees2008 Опубликовано - 21 - ноября Диалоги и lightbox
3418 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: Справочник

Модальное окно с фреймом,может кому пригодится
Здесь ничего сложного,стили ,скрипт и сам код окошка.

Код:
<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="https://ngcmshak.ru/dialogi-overlay-i-lightbox/modalnoe-okno-s-freimom.html" 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>

Посмотреть можете скопировав код и вставив в панель для проверки скриптов, справа.

Можешь почитать и вот эту статейку "Хак - Highslide JS - модные превьюшки"

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4615 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [12]
  • Гости: [12]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 25
  • Генерация страницы: 0.595сек
  • Потребление памяти: 6.212 Mb 
  •   Яндекс.Метрика