» »

Светлое модальное окно RazVed для сайта


Светлое модальное окно RazVed для сайта

Давайте рассмотрим светлое модальное окно на JavaScript и стилях. Его можно отнести по установке простое, по дизайн смотрится отлично на белом фоне. Если создавая сайт, уже нельзя без этого модального окна его представить. Так как оно отлично будет выводить вам и вашим пользователям и гостям ресурса, ту информацию, которую вы поставите. Здесь оно чисто текстовое и под изображение хорошо подходит, у него красиво сделан крестик в квадрате, что на светло красный оттенок шаблона видать и создавался. Но безусловно подойдет и на другую гамму, так как сделано с затемнением, что можете посмотреть.

модальное окно

Что по установке, для начало нужно скачать архив, и там будет 2 файла, это стили и is, также предполагается демонстрация скрипта, что можете в реале посмотреть.

Потом этот код ставим вверх сайта.

Код
<link rel='stylesheet' type='text/css' href='style.css'>  
  <script src='modal.js'></script>


Но и в то место, где будете выводить, также там и писать, что нужно.

Код
<button id='launchModalButton' type='button'>Показать окно</button>  
  <script>  
  var myModal = new Modal({  
  content: 'Здесь текст вашего сообщения для модального окна'  
  });  
  var launchModal = document.getElementById('launchModalButton');  
  launchModal.addEventListener('click', function() {  
  myModal.open();  
  });  
  </script>


Писать или ставить изображение, все нужно в одну строку, чтоб светло красная была, а если начнется темной, то работать не будет, это так на всякий случай, для тех, кто говорит, что не чего не получается.
24.04.2016 Загрузок: 1 Просмотров: 356 Комментарий: (7)

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

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

Комментарий: 7
tsakonter
tsakonter 24.04.2016 23:121
0
Не сказал бы что простое, но установка его, проще чем у других, а что затемнение, они почти все так идут.
Kosten
Kosten 24.04.2016 23:312
+1
Но основном всегда затемнение, это просто в интернете нашел и закинул на тестовый сайт и не показывало, видать много написал, а просто нужно все в одной строке делать, если на вторую выходит, то шрифт темнеет и это означает, не появится окно.
Сафрон
Сафрон 24.04.2016 23:373
0
Можно и по другому сделать, как вы задумали, здесь главное, что будет, или форма входа или обратная связь, но то что по сайту появляется, но с ним можно больше.

Сопрано
Сопрано 25.04.2016 00:504
0
Модальные окна стали часто на сайте появляться, вот думаю нужно какое то выбрать и попробовать установить.
feliksteg
feliksteg 26.04.2016 17:275
0
Но здесь же стили идут и можно кнопку поменять, то как то красная, это уже стандартно все сделано.
FeStemBer
FeStemBer 26.04.2016 18:226
0
feliksteg, да вы капитан очевидность) Но думаю так для общего знание будет полезно.
Kosten
Kosten 26.04.2016 18:467
0
На счет кнопки, здесь не знаю, так как не проверял, а вот что на сайте таймер стоит, так крестик, и сделан он на стилях, а что Вовчик рипнул окно или сделал, там уже ссылка установлена.
avatar