Здравствуйте! Как обычно материал из мастерской! но в этот раз материал у меня уже был готов так как я его писал давным давно по просьбе другого пользователя но добавлять его на этот сайт не стал так как он был опубликован на втором моём сайте которого правда уже нет и по этому добавлю его сюда!
О материале
Суть скрипта очень проста он открывает страницу добавления материала в модуль доска объявлений в окошке на той же странице где находится пользователь. так же скрипт редактировать вам не придется все действия такие как добавления полей или их исключение делаются стандартно через админ панель настройку модуля адаптация под мобильные телефоны я не делал. ладно хватит писанины приступим к установки!
Установка
Для начало мы зайдём на страницу добавления материала модуля доска объявлений или любого другого для которого нужно вывести страницу в окошке и заменим
на
Код
<span class="plusOb">$BODY$</span>
Отлично не забываем сохранить!
Теперь нам нужно зайти в верхнюю часть сайта и разместить там код самого окошка которое будет всплывать с формой добавления копируем код что предложен ниже
Код
<div class="kanavas-body"></div>
<div class="kanavas-okno">
<div class="kanavas-fon"><a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);" title="Закрыть окно" style="text-decoration:none; outline:none;"><div class="kanavas-close"></div></a>
<h1>Добавление объявления</h1>
<h5>Все поля с <font color="red" class="manStar">*</font> обязательны к заполнению</h5>
</div>
<div class="kanavas_pad_body">
<div class="body_pad">
<style>.form-fields .x-unselectable:hover #uCatsMenu7 {
display: block;
}
#uCatsMenu7 {
display: none;
}
</style>
<span id="plusOb"></span>
<script type="text/javascript">
$('#plusOb').load('/board/0-0-0-0-1 .plusOb');
</script>
</div>
</div>
</div>
Отлично не забываем сохранить!
Теперь если вы выбрали другой модуль не Доску объявлений то вам нужно будет сменить ссылку в скрипте выше на ссылку страницы добавления вашего модуля!
Пример ссылок
Доска объявлений
/board/0-0-0-0-1 Каталог файлов
/load/0-0-0-0-1 и тд.
Ну и теперь подключим стили окошка в вашу таблицу стилей для этого копируем код ниже и вставляем его в самый низ вашей таблицы
Таблица стилей css
Код
/*okno*/
.kanavas-body {background: rgba(0,0,0,0.7); width:100%; height:100%; position:fixed; left: 0px; top: 0px; z-index: 9;display:none;}
.kanavas-okno {margin-left:-35%;background:#fff; position:absolute; top: 50px; left:50%; z-index: 10; width:70%; height:auto; border-radius:9px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.3); display:none;}
.kanavas-fon {background: url("../img/KU273L0WTW.jpg") no-repeat center; background-size: 100%; border-top-left-radius:7px; border-top-right-radius:7px; width:100%; height:100px;}
.kanavas-fon h1 {
color: #FFF;
display: block;
text-align: left;
padding: 25px 20px 0;
}
.kanavas-fon h5 {
color: #FFF;
display: block;
text-align: left;
padding: 0 20px;
}
.kanavas-close {background:url("../img/close_ajax.png") no-repeat; width:24px; height:24px; float:right; margin:10px 10px 0 0; opacity: 0.5;}
.kanavas-close:hover {opacity: 1.0; cursor:pointer;}
.kanavas_pad_body {background:#fff; width:100%; height:auto;}
.manFlSbm {border: none;background: #1F5B88; border-radius:20px; color:#fff; font-size:14px;top: 40px; text-shadow:0 -1px 0 rgba(0, 0, 0, .2); text-align:center; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding:8px 30px; opacity: 0.8;}
.manFlSbm:hover {opacity: 1.0;}
.body_pad {padding: 25px 55px;}
/****/
/*login*/
div#uidLogButton {display: none;}
div#baseLogForm {display:block !important;}
.email_v {height: 60px;}
.pass_v {height: 60px;margin-top: 18px;}
.ewLabel {position: relative;display: block;text-align: left;line-height: 25px;color: #646464;font-weight: 100;font-size: 14px;margin-bottom: 8px;}
#ewTemporalSession {position: relative;display: block;width: 100%;height: 33px;padding: 20px 0px 5px 0px;}
.label_left {float: left;}
.loginButton {width: 100%;color: #FFF !important;padding: 10px 0px;}
#ewRemindPassword {text-align: center;padding: 15px 0px 15px 0px;;}
/*****/
Отлично не забываем сохранить!
Ну и осталось нам подключить скрипт который даст нам возможность добавлять картинки через окошко для этого просто добавьте строчку кода что представлена ниже в верхнюю часть сайта или нижнюю как вам удобно у меня стояла в верхней и всё отлично работало!
Код
<script src="/js/foto_ob.js"></script>
Отлично не забываем сохранить!
Ну и конечно же добавим кнопку вызова окошка в нужное место!
Код
<?if($ADD_ENTRY_LINK$)?> <a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);">Добавить объявление</a><?endif?>
Отлично не забываем сохранить!
Скачиваем архив и загружаем файлы к себе на сервер в тежи папки что и в архиве
waak 
web_master 
