43 РЕГИОН

Сайт недорого - это возможно у нас

Форма авторизации в отдельном, плавающем окне

Как обычно: "Заказчик попросил"...

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

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

И так, в качестве готового материала возьмем статью с сайта WEMARUS, в которой дан пример такого окна. Его-то и будем приращивать к нашей системе.

 

И так, начнем с того, что не будет отображаться на сайте в момент работы, т.е. со стилей.

Возьмем из материала стили и просто добавим их в файл стиля Joomla. Будьте внимательны, стили не должны совпадать с имеющимися.

 

#shadow {
background: black;
height: 100%;
opacity: 0.8;
position: fixed;
width: 100%;
z-index: 50;
display:none;
top:0;
left:0;
}

#window{
position:fixed;
left:50%;
top:50%;
width:800px;
height:500px;
margin-left:-400px;
margin-top:-250px;
border:1px solid black;
display:none;
background:white;
z-index:99;
box-shadow: 0px 0px 10px #000000;
}

#close{
background: url("closebox.png") 50% 50% no-repeat transparent;
border: medium none currentColor;
height: 30px;
position: absolute;
right: -15px;
top: -15px;
width: 30px;
}

 

Далее перейдем к index.php в шаблоне, откроем его для редактирования.

 

Здесь, для номальной работы нам понадобится добавить между тегами <hide ></hide > строку обработчика jquery:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script >

 

и скрипт вызова окна:

 

<script type="text/javascript" >
$(document).ready(function(){

$('#close').click(function() {
$('#shadow').hide();
$('#window').hide();
});

$('#url').click(function() {
$('#shadow').show();
$('#window').slideToggle(500);
});

})
</script >

 

Далее, в тело страницы, после <body> или до </body> вставляем:

 

<div id="shadow" ></div >
<div id="window" >

Для позиции модуля
<div id="close"></div >
</div>
<a href="#" id="url" >Открыть окно</a >

 

И немного помудрим, т.к. нам предложена простая ссылка(<a href="#" id="url" >Открыть окно</a >), которую мы можем заменить блоком, подчистив одно и добавив другое.

И так, из того, что есть в ссылке нам понадобится только идентификатор id="url".

Пишем <div id="url >Открыть</div > и в таком виде всё уже должно работать. Но у нас получится простой текст, а мы будем доволить его до формы.

Добавим стилей:

 

<div  id="url" style="position:fixed; right:0px; top:0px; padding: 5px; border-left:1px solid #000000; background:white; box-shadow: 0px 0px 10px #000000; border-bottom-left-radius: 10px;" >Открыть</div >(текст можно заменить картинкой) ;)

 

Если кто-то не силен в стилях, поясню:

 

position:fixed; - фиксированное положение окна, окно будет стоять на месте при прокрутке.  fixed можно заменить на absolute, что заставит окно двигаться с прокруткой.

right:0px; top:0px; - отступ положения блока, кнопки относительно правой стороны и верха. Модно расположить, так же слева left и внизу bottom, заменив соответствующие значения.

padding: 5px; - внутренний отступ

border:1px solid #000000; - бордюр, его размер и цвет.

background: #ffffff; - заливка блока-кнопки.

box-shadow: 0px 0px 10px #000000; - тень, её размеры и цвет.

border-radius: 10px; - радиус скругления

 

Исходя из стилей вы можете сделать что-то своё.

Кроме того, если вы собираетесь использовать блок с надписью, то следует добавить стили позволяющие отобразить его, как надо Вам.

 

text-align: center; - выравнивание текста.

font-size: 14px; - размер шрифта.

font-weight: bolder; - стиль шрифта, в данном случае жирный.

color: #3E3D43; - цвет шрифта.


И последнее, что мы сделаем - добавим позицию вывода модуля. Как сделать это описано в прошлой статье:"Как добавить позицию модуля в шаблон Joomla"

 

Если Вам не нужно затенение при появлении окна, то вы можете закомментировать его стиль, так:

/*

#shadow {
background: black;
height: 100%;
opacity: 0.8;
position: fixed;
width: 100%;
z-index: 50;
display:none;
top:0;
left:0;
}

*/

Или просто удалить.