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

Регистрация в модальном окне

irbees2008 irbees2008 Опубликовано - 22 - ноября TWIG
4090 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Регистрация в модальном окне,может кому пригодится
1.Итак приступим,пропишем в стили стиль окошка

Код:
.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;
}
2.Кнопка вызова окна
Код:
<a href="{home}/register/" onclick="return showModal(this);">Регистрация</a>
3.Код самого окошка
Код:
<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" width="600" height="300" frameborder="0"></iframe>
</div>
</div>
4.Подключаем скрипт вывода окна в head
Код:
<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>
5.Ну и скрываем все блоки в main.tpl для страницы регистрации кроме
Код:
{mainblock}
вот так
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{l_langcode}" lang="{l_langcode}" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset={l_encoding}" />
<meta http-equiv="content-language" content="{l_langcode}" />
<meta name="generator" content="{what} {version}" />
<meta name="document-state" content="dynamic" />
{htmlvars}
<link href="{tpl_url}/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="{home}/rss.xml" rel="alternate" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="{scriptLibrary}/functions.js"></script>
<script type="text/javascript" src="{scriptLibrary}/ajax.js"></script>
<title>{titles}</title>
</head>
<body>[TWIG]
[sitelock]
<div id="loading-layer"><img src="{tpl_url}/images/loading.gif" alt="" /></div>
{% if not isHandler('core:registration') %}

тут ваши блоки
тут ваши блоки
тут ваши блоки

{% endif %}

{mainblock}

{% if not isHandler('core:registration') %}

тут ваши блоки
тут ваши блоки
тут ваши блоки

{% endif %}
[/TWIG]
[/sitelock]

<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" width="600" height="300" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
вот и все

Можешь почитать и вот эту статейку "Отступаем.......Bootstrap 4"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

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

Теги

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

Статистика

  • Caйту: 4488 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Google, Яндекс, dankeanke
  • SQL запросов: 29
  • Генерация страницы: 0.301сек
  • Потребление памяти: 5.156 Mb 
  •   Яндекс.Метрика