Регистрация в модальном окне
2013-11-22 02:47:22 (читать в оригинале)
Регистрация в модальном окне,может кому пригодится
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>
вот и все
