Всплывающее стильное модальное окно для 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' }); }  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
|
| |
