вРазные полезности

Всплывающее стильное модальное окно для uCoz

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

Давно что то я не выкладывал интересные скрипты для сайтов uCoz, тут наверное играет роль реальная жизнь в которой были времена когда не когда добраться до компьютера и что то оформить. Ну да ладно я тут и буду снова вас радовать интересными решениями для сайтов uCoz.

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

Установка модального окна на сайт uCoz

В первую очередь вам нужно скачать архив и загрузить всё что там есть в файловый менеджер вашего сайта.

Затем установите данный скрипт в нижнюю или верхнюю часть вашего сайта.

Код
<script>
$(document).ready(function()
$(‘.paulund_modal’).paulund_modal_box();
$(‘.paulund_modal_2′).paulund_modal_box(
title:’Second Title Box’,
description:»
);
});
</script>
<script src=»/jquery.paulund_modal_box.js»></script>

Теперь мы с вами установим ссылку которая будет выводить модальное окно и для этого вам нужно создать ссылку вот такого типа.

Код
<a href=»#» class=»paulund_modal»>КЛИКНИ ПО МНЕ ДЛЯ ДЕМОНСТРАЦИИ МОДЕЛЬНОГО ОКНА</a>

Где мы видим что у ссылке есть свой class который будет отвечать за вывод и настройку модального окна.

Ссылку вставляем в то место на сайте где вы желаете выводить информацию в модульном окне.

И на этом установка закончена модального окна для сайтов uCoz.

Разбор полёта!

Разбор полёта я подразумеваю то что я сейчас вам немного укажу где и что изменять для настройки модального окна.

И так для настройки модального окна вам нужно открыть файл jquery.paulund_modal_box который вы найдёте в скачанным архиве.

Настройка:

Изменения названия и текста в самом модальном окне вы можете в этой части скрипта.

Код
// Default parameters

var options = $.extend(
height : «250»,
width : «500»,
title:»Всплывающее модальное окно «Simple Modal Box With JQuery»»,
description: «Реализация модульного окна для сайтов uCoz, теперь просто и доступно стало для вас!»,
top: «20%»,
left: «30%»,
,prop);

Стили которые отвечают за внешность модального окна находятся там же и вы можете настраивать под свой дизайн сайта и для этого изменяйте стили в этой части скрипта .

Код
/**
* Add styles to the html markup
*/
function add_styles()
$(‘.paulund_modal_box’).css(
‘position’:’absolute’,
‘left’:options.left,
‘top’:options.top,
‘display’:’none’,
‘height’: options.height + ‘px’,
‘width’: options.width + ‘px’,
‘border’:’1px solid #fff’,
‘box-shadow’: ‘0px 2px 7px #292929’,
‘-moz-box-shadow’: ‘0px 2px 7px #292929’,
‘-webkit-box-shadow’: ‘0px 2px 7px #292929’,
‘border-radius’:’10px’,
‘-moz-border-radius’:’10px’,
‘-webkit-border-radius’:’10px’,
‘background’: ‘#f2f2f2’,
‘z-index’:’50’,
);
$(‘.paulund_modal_close’).css(
‘position’:’relative’,
‘top’:’-25px’,
‘left’:’20px’,
‘float’:’right’,
‘display’:’block’,
‘height’:’50px’,
‘width’:’50px’,
‘background’: ‘url(/images/close.png) no-repeat’,
);
$(‘.paulund_block_page’).css(
‘position’:’absolute’,
‘top’:’0′,
‘left’:’0′,
‘background-color’:’rgba(0,0,0,0.6)’,
‘height’:’100%’,
‘width’:’100%’,
‘z-index’:’10’
);
$(‘.paulund_inner_modal_box’).css(
‘background-color’:’#fff’,
‘height’:(options.height — 50) + ‘px’,
‘width’:(options.width — 50) + ‘px’,
‘padding’:’10px’,
‘margin’:’15px’,
‘border-radius’:’10px’,
‘-moz-border-radius’:’10px’,
‘-webkit-border-radius’:’10px’
);
}

 


источник: zornet.ru

Похожие посты