jQuery: делаем всплывающее окно


Так как jQuery сегодня имеет большую популярность, не лишним будет запастись знаниями, которые помогут оснастить свой проект оригинальными элементами. Сегодня предлагаю рассмотреть простейшее всплывающее окно по принципу pop-up. Несмотря на то, что люди нередко агрессивно воспринимают такие вот окна (чаще всего из-за рекламного характера), мы можем использовать их в иных целях, например, информирования о новых материалах или для проведения акций и т.п.

Первым этапом нам предстоит создать само окно. Для этого я подготовил вам парочку графических элементов и поместил их в папку Images, которую можно скачать тут. Обязательно скачиваем последнюю версию библиотеки jQuery, если у вас она еще не установлена. Далее нам понадобится создать файл windowstyle.css, который будет костяком самого окна:

#pop-up-window{
position: absolute;
left: 200px;
top: 200px;
width: 400px;
height: 300px;
overflow: hidden;
}

#windowHeader{
height: 30px;
overflow: 30px;
background-image: url(images/window_top_end.png);
background-position: right top;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
cursor: move;
}

#windowTitle{
margin-right: 13px;
background-image:url(images/window_top_start.png);
background-position:left top;
background-repeat: no-repeat;
overflow: hidden;
height: 30px;
line-height: 30px;
text-indent: 10px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #9674ef;
}

#btnClose{
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}

#windowRightSide{
position: relative;
height: 270px;
background-image: url(images/window_bottom_end.png);
background-position: right bottom;
background-repeat: no-repeat;
}

#windowLeftSide{
position: relative;
height: 270px;
background-image: url(images/window_bottom_start.png);
background-position: left bottom;
background-repeat: no-repeat;
margin-right: 13px;
}

#showWindow{
width: 150px;
padding: 10px;
border: 1px dashed #D8D8D8;
background-color: #898989;
font-weight: 600;
color: #FF884C;
cursor: pointer;
}
Если есть желание, то можете его подкорректировать!

Далее работаем с html. Для этого создаем файл window.html и прописываем в нем блоки вашего окна (шапка, боковые панели), его название, функции отображения и скрытия окна. Выглядит это следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

  <head>
    <script type="text/javascript" src="jquery-ваша версия"></script>
    <link rel="stylesheet"  type="text/css" href="windowstyle.css" />   
  </head>
  
  <body>
  <h1>Ваш материал</h1>
  <div id="pop-up-window"><!--Разрабатываемое нами окно-->
    <div id="windowHeader"><!--«Шапка» окна-->
        <div id="windowTitle">Всплывающее окно jQuery</div><!--Заголовок данного окна-->
            <img src="images/window_close.jpg" id="btnClose" /><!--Кнопочка, закрывающая окошко-->
    </div></div>

    <div id="windowRightSide"><div id="windowLeftSide"></div></div><!--Боковые панели окна--> 

  <div id="showWindow">Отобразить всплывающее окно</div>
  </body>
   </html>

Примечание: для отображения содержимого самого окна вам понадобится добавить директиву

<div id="windowContent">Содержимое окна</div>

Здесь вы вольны прописать то, что необходимо донести до пользователей проекта. Не забывайте указывать для содержимого параметры в файле windowstyle.css.
Осталось запустить функциональный скрипт, который будет активировать директивы запуска и закрытия окна. Для этого открываем наш windows.html и прописываем следующий код:

<script>
$(document).ready(function(){
    var pop_window = $('#pop-up-window');

        pop_window.hide();

    $('#showWindow').click(function(){ 
        pop_window.show(1000);
    });

    $('#btnClose').click(function(){ 
        pop_window.hide(1000);
    });

    });
</script>
Теперь элементы

$('#showWindow').click(function(){ 
        pop_window.show(1000);
    });
и

    $('#btnClose').click(function(){ 
        pop_window.hide(1000);
    });

Будут регулировать запуск окна при нажатии и его закрытие соответственно.

P.S.: в результате у Вас должно получиться окошко, которое изображено в начале темы.

0 комментариев