Всплывающее окно при нажатии на кнопку



всплывающее окно при нажатии на кнопку

всплывающие окно

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

код див окна

div span style= CURSOR: pointer

form input style= FONT-FAMILY: Monotype Corsiva BACKGROUND: none transparent scroll repeat 0% 0% COLOR: #000099 FONT-SIZE: 18px value= Новое окно type= button /form /span

Блог Костаневича Степана

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое#8230

Как сделать всплывающее окно на сайте

На сайтах, блогах или в интернет магазинах можно увидеть такой эффект, когда при нажатии на кнопку или ссылку затемняется веб-страница и появляются всплывающее окно с формой обратной связи или подпиской на курсы или с корзиной товаров и др. Сегодня мы попробуем что-то подобное сделать. Буду использовать HTML+CSS+Javascript.

Итак, есть два блока ( div ):  фон и само всплывающее окно с содержимым. Они скрыты, так как в CSS прописано свойство:

И когда мы нажимает на кнопку или ссылку, чтобы вызвать всплывающее окно, два блока( div ) появляются, так как в CSS свойство изменяется на:

display: block

Саму суть, я думаю, вы поняли.

Вставьте в HTML файл перед  /body вот такой код:

CSS стиль.

Сейчас блоки «wrap» и «window» находятся в скрытом состоянии:

display: none

Чтобы блоки появились после нажатия по ссылке, добавьте Javascript код перед тегом /head или перед тегом /body :

Всплывающее окно jQuery

Здравствуйте, уважаемые читатели блога LifeExample. предлагаю вам продолжить наше знакомство с библиотекой jQuery и написать первый серьезный скрипт с использованием этого инструмента: Всплывающее окно jQuery . В задачи скрипта будет входить вывод на страницу сайта информационного окна, в котором можно разместить все что угодно: от приветствия и поздравления с майскими праздниками, до рекламного баннера партнера.

Бороздя просторы глобальной паутины, я думаю, вы не раз сталкивались с подобными всплывающими окнами. Не смотря на то, что у пользователей приходящих на ваш сайт уже данным давно выработался инстинкт: Вижу всплывающее окно – сразу закрываю! , нам все равно может пригодиться данный скрипт. А по этому, не медленно приступим к его разработке.

Подготавливаем окно к всплытию.

Прежде чем углубляться в процесс реализации скрипта, нам необходимо создать наше всплывающее окошко, пока без анимации. Для этого создайте два файла windowstyle.css и window.html. а также нам потребуется директория для хранения картинок images. Скачайте свежую библиотеку jQuery и поместите её в одной папке со скриптом. Если вы не знаете, как это сделать, читайте статью посвященную знакомству с библиотекой jQuery.

После того как все необходимые файлы созданы можно заняться их наполнением. Для того чтобы наше окошко выглядело модно и красиво, нам потребуется набор картинок формирующий целостный вид окна (ниже #8211 ссылка для скачивания ).

Файл стилей windowstyle.css мы не будем рассматривать подробно, т.к. он очень большой и не обладает правом тратить наше время. Просто скачайте его вместе с необходимым набором картинок.

Перенесем картинки из содержимого архива в папку images. а также заменим наш windowstyle.css и продолжим подготовку. Для завершения церемонии приготовления, нам остается создать HTML код будущего всплывающего окна.

Вот таким должен получиться файл window.html

Источники: http://www.likiliks.ru/div.html, http://bloggood.ru/effekty-dlya-sajta-2/kak-sdelat-vsplyvayushhee-okno-na-sajte-2.html/, http://lifeexample.ru/jquery-javascript-primeryi/vsplyivayushhee-okno-jquery.html






Комментариев пока нет!

Поделитесь своим мнением

Сумма: код подтверждения