• 1715
  • 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>
вот и все

Можешь почитать и вот эту статейку "Флеш облако из картинок"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

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