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

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

Создаем всплывающее окно, которое появляется если посетитель пытается уйти с вашего сайта.

Для того чтоб установить данный код, вам понадобятся знания HTML, либо передайте данную инструкцию, вашему техническому специалисту.

Нажмите ЗДЕСЬ чтоб скачать код всплывающего окна.

Нажмите ЗДЕСЬ чтоб бесплатно скачать программу для редактирования кода вашего сайта.

Обязательно установите ее себе на компьютер. В будущем без нее никак.

Ищем FTP доступ к вашему серверу. Чтоб узнать как это сделать нажмите ЗДЕСЬ.

Screenshot_1

Запускаем программу FileZilla. Если у вас нет этой программы — вы можете бесплатно скачать ее ЗДЕСЬ.

Screenshot_3

Подключаемся к вашему серверу через FTP. Подробнее смотрите: пункт «Подключение»

Screenshot_4

Ищем в FileZilla, на вашем сервере (под папками, что находятся с правой стороны),  файл index.html.

Screenshot_8

В моем случае, я не хотел делать всплывающее окно для всего сайта, а только для файла index.html который находиться в папке «testpage» , потому открыл эту папку и нашел нужный мне index.html файл.

Если вы хотите сделать всплывающее окно, что будет открывается в не зависимости от того, с какой страницы вашего сайта посетитель пытается уйти — вам нужно работать с файлом index.html, который есть в корневой папке вашего сайта.

Не закрываем FilleZilla.

Открываем скаченный файл.

Screenshot_5

Распаковываем скаченный файл.

Screenshot_6

Открываем на рабочем столе скачанную и распакованную папку «arcticmodal».

Screenshot_9

Перетягиваем папку arcticmodal из открытой папки, в FileZilla, под вашим файлом index.html

Screenshot_10

Открываем правой кнопкой мыши ваш index.html файл, что в FileZilla, и пытаемся редактировать. Если редактировать не получается — копируем (перетягиваем) его из FileZilla на ваш рабочий стол.

Screenshot_11

Нажимаем на рабочем столе скопированный index.html файл , правой кнопкой мыши,  и нажимаем в меню что появилось:

Открыть с помощью NotePad++  (Edit with NotePad ++) .

Screenshot_12

 

Для примера возьмём данный сайт:001 Страница примера

Сейчас мы открыли HTML код нашей страницы куда нам нужно будет вписать определённые код скрипта который отвечает за всплывающее окно на нашей странице. Выглядит он вот так 002 HTML код нашей страницыТеперь заходим в папку распакованного ранее архива видим там файл под названием test.html его нам тоже нужно открыть редактором Notepad++ нажимаем правую кнопку и в выпавшем меню выбираем пункт Edit With NotePad++003 Код скриптаОткроется окно NotePad++ с html кодом запуска скрипта PopUp окошка выглядит он вот так004 код скриптаДля удобства нам NotePad++ открыл 2 кода html код нашей странички куда нужно поставить наше PopUp окошко и непосредственно код нашего PopUp окошка они находятся как вкладки в левом верхнем углу экрана редактора NotePad++005 вкладки

Для начала нам нужно будет вставить строчки кода в которых сообщается нашей странички где находится скрипт для работы PopUp окошка. Для этого в вкладке в редакторе NotePad++ выбираем вкладку под названием test.html выделяем и копируем текс как показан на рисунке (для того чтобы скопировать воспользуемся сочетанием клавиш на клавиатуре CTRL+C)006 Подключаем путь сриптаТеперь нам нужно вставить его в код нашей странички. Для этого переходим в вкладку редактора NotePad++ под названием index.html и вставляем в то место которое показано на картинки (под «тем местом» имеется в веду место которое располагается между ключевыми словами <head>…</head> для удобства можно воспользоваться сочетанием клавиш CTRL+V)007 Код главной страницыПосле того как мы вставили первую часть кода перейдём к копированию и вставке второй части кода для этого перейдём обратно во вкладку text.html и скопируем код который показан на рисунке 008 вторая часть кодаТеперь переходим обратно к вкладке index.html и вставляем в место показанное на картинке (это место находится после ключевого слова <body>) В этомже коде редактируем текст который будет видить пользователь при попытки выйти из страницы.009 вторая часть в основную страницуТеперь сохраняем наши изменения сочетанием клавиш CTRL+S

Сейчас нам нужно вернуть на место наш файл index.html (Вернуть на FTP Сервер где находится наш сайт с скопированным ранее папки arcticmodal)010 Возвращяем индексПроверяем что у нас получилось. Для этого заходим на нашу страничку и передвигаем курсор мыши к вкладке с кнопкой крестика для закрытия страницы и видим что перед нами всплывает наше окно011 наше поп ап окошко готовоНаше PopUp окошко готово! =) Приятного пользования!

ПОСТ БЫЛ ПОЛЕЗЕН? ЖМИТЕ "МНЕ НРАВИТСЯ"
Как сделать всплывающее окно на своём сайте 1
Как сделать всплывающее окно на своём сайте 934
Как сделать всплывающее окно на своём сайте 207
Как сделать всплывающее окно на своём сайте 992
Как сделать всплывающее окно на своём сайте 24
Как сделать всплывающее окно на своём сайте 77
Как сделать всплывающее окно на своём сайте 614
Как сделать всплывающее окно на своём сайте 658
Как сделать всплывающее окно на своём сайте 212
Как сделать всплывающее окно на своём сайте 516
Как сделать всплывающее окно на своём сайте 664
Как сделать всплывающее окно на своём сайте 389
Как сделать всплывающее окно на своём сайте 648
Как сделать всплывающее окно на своём сайте 933
Как сделать всплывающее окно на своём сайте 311
Клумба для цветов своими руками на дачеХимия для волос в домашних условиях локономПоздравление для лехи с днем рожденияПоздравительный открытки день конституцийБлагодарность за поздравления с днём рождения на английском языкеЛегко и просто своими руками для садаКогда сажать мяту в грунтУстановка металлических дверей в деревянном доме своими рукамиКак на компьютере сделать вай фай не от роутераПоздравления крестнице на 1 годик своимиКак поздравить молодых на свадьбе прикольно с подаркомКонкурсы для мальчиков в домашних условияхДомашняя наливка из вишни с водкой в домашних условияхКак сделать схождение на ваз 21213Как сажать викторию в сибири

Похожие записи:

  • Как выращивать рассаду в доме
  • Постройки из дерева своими руками фото
  • Варенье из клубники на зиму как сделать
  • Чучело огородное как его сделать
  • Делаем цветок из гофрированной бумаги своими руками