» »

Вызов светлого модального окна jQuery и CSS


Вызов светлого модального окна jQuery и CSS

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

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

Вызов модального окна jQuery по ссылке с CSS

Переходит к установке:

Сразу пропишем стили в CSS:



В низ сайта идем и ставим библиотеку в head документа.

Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


Здесь же выставляем Код jQuery.

Код
<script>
$(document).ready(function() {  
  $('a[name=modal]').click(function(e) {
  e.preventDefault();
  var id = $(this).attr('href');
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $('#mask').css({'width':maskWidth,'height':maskHeight});
  $('#mask').fadeIn(1000);  
  $('#mask').fadeTo("slow",0.8);  
  var winH = $(window).height();
  var winW = $(window).width();
  $(id).css('top', winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);
  $(id).fadeIn(2000);  
  });
  $('.window .close').click(function (e) {  
  e.preventDefault();
  $('#mask, .window').hide();
  });  
  $('#mask').click(function () {
  $(this).hide();
  $('.window').hide();
  });  
  });  
</script>


В нем не что не нужно делать, как на источнике написано, что подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.

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

Код
<a href="#dialog" name="modal">Клик на появление модального окна</a>

<!-- Само окно -->
<div id="boxes">  
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/><img src="http://ipariksha.in/i-pariksha-plug-in/clsh.png"></a></div>
<div class="content">
   
Место где будет описание на сайте, также можно написать, устав ресурса или просто поставить вход на сайт.

  </div>
</div>
</div>

<!-- Маска, затемняющая фон -->
<div id="mask"></div>


Просто картинку убрал и все яркие тона и так вот вышло, чтоб понятно было, и углы можно оставить или сделать больше, как вам нужно в этом плане.

модального окна CSS

Надеюсь понятно все описал, так как установил на тестовый сайт и постарался все проверить.
03.05.2016 Просмотров: 408 Комментарий: (4)

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

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

Комментарий: 4
FeStemBer
FeStemBer 03.05.2016 02:501
0
А код Код jQuery нужно обязательно, просто мне встречались такие окна и в некоторых случаях не ставил и все показывало.
Kosten
Kosten 03.05.2016 02:592
0
Tventum, чтоб залить этот материал и также другие лкна, уходит реально не один час. Вот нашел его, что где то понимаю начинаю разбирать, чтоб потом нормально описать. И приступаю на тестовый ставить, и если могу что то изменить, то стараюсь это сделать. Но есть модальные окна, которые не нужно не чего менять, идут сразу конфеткой.



Вот оригиналом шло, что можно кнопку убрать, как написал и просто прописать, что закрыто, но решил кнопку поставить, да найти нужно было, что то оригинальное, просто круглые, как то на всех стоят почти.
FeStemBer
FeStemBer 03.05.2016 17:143
0
Но это не просто копировать и на свой сайт перенести. Хотя здесь тоже скопировано, но только все проверенно и что то как видно от себя добавлено.
frecsarg
frecsarg 03.05.2016 19:484
0
Красный крестик не в тему на синем цвете, вот уже на анологичном уже по другому смотрится.
avatar