Введение
Зачастую на сайтах приходится выводить всевозможные информативные окна — попапы, или как их еще называют всплывашки. Попапы могут быть использованы для вывода различных сообщений, для ввода пользователем информации и тд. Сейчас сайты становятся все более интерактивными и такие всплывашки используются чаще и чаще. В связи с этим, я решил набросать статейку, в которой покажу как можно быстро с помощью jQuery самом реализовать попап без использования других библиотек.
Простая всплывашка на jQuery практически всегда располагается по центу экрана, а все что находится за ней затемняется. Расположение и затемнение можно реализовать с помощью css. А само появление и исчезновение уже придется писать на jQuery.
Простая всплывашка на jQuery. Код
Приступим непосредственно к написанию кода, начнем с css:
.popup_bg{ position: absolute; z-index: 1000; top: 0; left: 0; display: none; background-color: #000; opacity: 0.5; } .div_popup{ position: fixed; z-index: 2000; margin-top: 10%; width: 300px; height: 300px; left: 50%; margin-left: -150px; display: none; border: 3px solid #00FF00; background-color: #0000FF; }
В стилях всего два класса, один — popup_bg будет использован для затемнения всего, что будет находиться за всплывашкой. Это будет простой div, который мы растянем на весь экран.
Теперь напишем html код страницы с попапом:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Простой popup на jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <!-- popup bg--> <div class="popup_bg"></div> <!-- popup --> <div class="div_popup"> <input type="button" id="hide_popup" value="Скрыть попап" /> </div> <input type="button" id="show_popup" value="Показать попап" /> </body> </html>
Ну и наконец напишем js, который будет показывать и скрывать всплывашку. Не забудьте подключить библиотеку jQuery, без нее код не будет работать.
$(document).ready(function(){ // действия для кнопок $('#show_popup').click(function(){ show_popup(); }); $('#hide_popup').click(function(){ hide_popup(); }); }); // показать попап function show_popup(){ // получаем размер экрана var bg_height = $(document).height(); var bg_width = $(window).width(); // задаем темному фону размер на весь экран $('.popup_bg').css({ 'width': bg_width, 'height':bg_height }); // плавно показываем фон и попап $('.popup_bg').fadeIn(500); $('.div_popup').fadeIn(500); } // скрыть попап function hide_popup(){ // плавно скрываем попап и фон $('.popup_bg').fadeOut(500); $('.div_popup').fadeOut(500); }
Вот и все, вы можете скачать исходники — тут.
а почему на несколько элементов не работает?