Хаки и Скрипты Next Generation CMS : TWIG, Диалоги и lightbox : Регистрация в модальном окне

irbees2008 Опубликовано - 22 - ноября TWIG

Адаптировал: 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>

вот и все

Можешь почитать и вот эту статейку "Настройка htaccess"

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

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