Всплывающее окно внизу слева экрана с фиксированной кнопкой внизу на jQuery

Автор Макс Пуля

Рабочий код всплывающего окна при входе на сайт с задержкой. Окно открывается внизу слева страницы и имеется кнопка для открытия всплывающего окна.

Итак, задумка была следующая… Внизу слева страницы должна находиться фиксированная кнопка, при нажатии на которую, открывается всплывающее окно внизу страницы. А также, всплывающее окно должно открыться само через 5 секунд. Обязательное наличие кнопки закрытия всплывающего окна. Всё это напоминает кнопку от сервиса JivoSite. Хотя, чего много писать, смотрите ДЕМО и всё сразу поймете!

Такое боковое всплывающее окно может понадобиться для отображения акции, формы обратной связи, важной информации и другого.

Теперь перейдем к коду. Самый простой вариант это скачать исходники, разместить их на своём сервере и переписать код из файла index.html на свой сайт.

Скачать исходник кода бокового всплывающего снизу сайта с автоматическим появлением через 5 секунд, кнопкой закрытия и кнопкой вызова всплывающего окна можно по ЭТОЙ ПРЯМОЙ ССЫЛКЕ.

Теперь подробнее…

После того, как скачали архив исходника, извлекаем содержимое. В папке mwindow: папка css содержит файл со стилями, папка images содержит демо-изображение и изображение кнопки закрытия всплывающего окна, папка js содержит JavaScript для работы всплывающего окна. А файл index.html содержит весь необходимый код для демонстрации и работы всплывающего окна.

Чтобы добавить на свой сайт такое всплывающее окно, Вам нужно скопировать на хостинг папку mwindow и удалить файл index.html

Теперь нужно добавить код на свой сайт (шаблон сайта).

1. Между тегами <head> </head> вставить код:

<link href="/mwindow/css/style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/mwindow/js/my_scripts.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

2. Между тегами <body> </body> вставить код:

<div id='follow'>
<div class="link_group">
<a class="show_popup" rel="photo_win" href="#"><img src='mwindow/images/buttom.png'
border=0 alt='Кнопка' title='Кнопка' /></a>
</div>
</div>
<div id="12">
<div class="popup photo_win">
<a class="close" href="#">Close</a>
<h2></h2>
<div class="img_wrap">
<a href="#">
<img alt="EPIC BLOG net" title="EPIC BLOG net" src="/mwindow/images/what.jpg" /></a>
</div>
</div>
</div>

Вот и всё! Обязательно проверьте пути к файлам style.css и my_scripts.js, при правильном пути, эти файлы должны открываться в браузере. Обратите внимание, что в коде присутствует <h2></h2> - туда Вы можете написать заголовок всплывающего окна.

Всем удачи и добра!

Опубликовано в Веб-разработки

Теги