Авторизация в модальном окне. (Первая ветка) 4 866 просмотров

Делалось на 1.10.4 возможно в 1.10.6 что то отличается.

Простенький скрипт модального окна прикрученный к модулю авторизация пользователя.
Использовать его как основной способ авторизации, считаю лишним, но есть моменты, когда например какой то контент скрыт от гостя, при его попытке получить доступ к этому скрытому содержимому, возможно лучше показать ему окно авторизации в модальном окне, чем устраивать ему принудительный переход на страницу авторизации.

Например кто скрывает контакты в объявлениях.

Как прикрутить

в файле шаблона template.php в секции <head> </head>

Например после этого блока

// Подключаем стили шаблона
    $this->addHeadCSS('templates/'.TEMPLATE.'/css/styles.css');

вставить этот блок:

 
//если на странице есть показ модуля login
if($mod_count['login']) { 
	// Подключаем модальное окно
	$this->addHeadJS('modal/script.js');
	$this->addHeadCSS('modal/style.css');
     }

в этом же файле в самом низу перед

</body>
</html>

вставить:

<?php if($mod_count['login']) { ?>
         <div class="m_overlay-container">
		<div class="m_window-container zoomin">
          <?php $this->printModules('login'); ?> 
          <span class="m_close" title="Закрыть"></span> 
          </div>
          </div>
      <?php } ?>

в этом же файле после этого блока

// Получаем количество модулей на нужные позиции
    $mod_count['top']     = $this->countModules('top');
    $mod_count['topmenu'] = $this->countModules('topmenu');
    $mod_count['sidebar'] = $this->countModules('sidebar');

вставить строку

$mod_count['login'] = $this->countModules('login');

в positions.txt добавить строку:

login

папку "modal" из архива залить в корень сайта.

файл module_auth.tpl отредактировать по своему усмотрению или как есть залить по адресу /templates/ваш_шаблон/modules/

в настройках модулей, настроить показ модуля авторизация (или создать дубликат модуля и настроить)
позиция для показа: login
шаблон для показа модуля: module_auth.tpl
доступ: гости
страницы для показа на ваш выбор.

далее там где нужно организовать по клику появление всплывающего окна с авторизацией в соответствующих файлах шаблонов (.tpl) расставить

<input type="button" value="Показать" class="m_button" data-type="zoomin" />

в файле /modal/style.css

настроить стили для класса

.m_button{

}

или не настраивать, будет выводиться стандартные стили.

Если на одной странице кнопка вызова окна с авторизации должна выглядеть так, а на другой странице иначе, в скрипте script.js

продублировать блок

	$('.m_button').click(function() {
 
		type = $(this).attr('data-type');
 
		$('.m_overlay-container').fadeIn(function() {
 
			window.setTimeout(function(){
				$('.m_window-container.'+type).addClass('m_window-container-visible');
			}, 100);
 
		});
	});

задав другие имена классов,

$('.m_button_2').click(function() {
 
		type = $(this).attr('data-type');
 
		$('.m_overlay-container').fadeIn(function() {
 
			window.setTimeout(function(){
				$('.m_window-container.'+type).addClass('m_window-container-visible');
			}, 100);
 
		});
	});

и в файле style.css описать стили для нового класса m.button_2

Например у меня в одном месте вызов окна с авторизацией происходит по клику на простую кнопку "показать", в другом месте это клик по постеру, который в классе m_button_2 прописан как background
ну и т. д.

сам скрипт и стили instantcms.ru/users/files/download5242.html

СМС регистрация на сайтах с InstantCMS (первая ветка)

html5 плеер для аудио в BBcode редакторе (Первая ветка)