» »

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


Всплывающее стильное модальное окно для 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'
  });
  }

07.10.2015 Загрузок: 5 Просмотров: 992 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Сопрано
Сопрано 07.10.2015 23:111
0
Много раз попадалось название модальное окно, как то внимание не уделял на его и вообще не понимал зачем оно нужно на сайте. А здесь вот как все закручено.
Canon
Canon 07.10.2015 23:152
0
Но на системе uCoz это вообще редкость, хотя, если посмотреть с другой стороны, здесь будет только одна надпись, которое вызовет окно , так все правильно и возможно пригодиться.
Kosten
Kosten 07.10.2015 23:213
0
Но это вообще первый скрипт такого окна как помню. Его много где видал, а вот как материал нет под систему и это видать адаптирован был, хотя могу ошибаться, но демонстрация показывает, как он работает и на этом сайте если нужно, то можно установить.
AnTron
AnTron 07.10.2015 23:244
0
Информационный скрипт, больше не чего добавить, модальные окна это не новшество.
Canon
Canon 07.10.2015 23:415
0
Что то не получается установить не появляется окно.
Kosten
Kosten 07.10.2015 23:436
0
Вот тема на форуме, где опишите все подробно, что там не появляется и где прописали, форум Помощь по сайту uCoz создаем сами тему с названием.
ZruBkul
ZruBkul 07.10.2015 23:457
0
Canon, вы все коды прописали?
Canon
Canon 07.10.2015 23:478
0
ZruBkul, все поставил, только один не правильно, все спасибо, заработало. Доля объявление поставил и всем еще письма разослал.
Kosten
Kosten 07.10.2015 23:559
0
Но и отлично что сами все исправили, теперь знать будете, что где должно стоять и где не нужно устанавливать, как говориться все на ошибках учатся и не вижу исключение.
AnTron
AnTron 07.10.2015 23:5710
0
Чем такие окна нравятся, это затемнение, а что вы не поставили на этот сайт, очень оригинально смотрится и когда что то написано, только внимание на его.
Kosten
Kosten 07.10.2015 23:5911
0
AnTron, зачем, чтоб при выборе смайла, было все органично, просто не вижу смысла в этом. Понимаю, когда что то написано, а поставить смайл иди логин прописать, чтоб зайти на сайт, это думаю лишнее.
avatar