Вызов светлого модального окна jQuery и CSS
 | |
| Думаю вам не раз приходилось видеть на разных ресурсах модальное окно, и как оно появляется. Теперь вы можете выставить себе на сайт и подогнать по оттенку цвета, так как отлично в стилях оно регулируется. А это сама гамма и безусловно ширина и высота, вам все нужно это делать самому, так как неизвестно, что там прописывать или ставить будите. Недавно залил в категорию модальное окно, которое по своей стилистике немного схоже, что рекомендую посмотреть. А так оно по умолчанию будет синий вверх, и безусловно затемнение, которое стоять будет на 0.8, но можно на один прибавить или отнять, все это в 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> Просто картинку убрал и все яркие тона и так вот вышло, чтоб понятно было, и углы можно оставить или сделать больше, как вам нужно в этом плане.  Надеюсь понятно все описал, так как установил на тестовый сайт и постарался все проверить. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
Tventum, чтоб залить этот материал и также другие лкна, уходит реально не один час. Вот нашел его, что где то понимаю начинаю разбирать, чтоб потом нормально описать. И приступаю на тестовый ставить, и если могу что то изменить, то стараюсь это сделать. Но есть модальные окна, которые не нужно не чего менять, идут сразу конфеткой.
 Вот оригиналом шло, что можно кнопку убрать, как написал и просто прописать, что закрыто, но решил кнопку поставить, да найти нужно было, что то оригинальное, просто круглые, как то на всех стоят почти. | |
