SEO продвижение сайтов

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

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

Необходимо создать три файла или скачть modal-window-js архив примера.

И так создаем HTML-файл - index.html

<!DOCTYPE html><html dir="ltr" lang="<?php echo $document->language; ?>">
<head>
<title>Вслывающее окно</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/my.js"></script>
<link rel="stylesheet" href="/style.css" media="screen">
</head><body>

<div id="wrap-gen"></div>
<div class="window">
<span class="close">Закрыть</span>
</div>

<p><span class="link-gen">Вызвать модальное окно</span></p>

</body></html>

И так создаем CSSL-файл - style.css

* {margin:0; padding:0;}

/*Фон*/
#wrap-gen {display:none; position:fixed; left:0; right:0; bottom:0; top:0; background:rgba(0, 0, 0, .3); padding:10px; z-index:1000;}

/*Окно*/
.window {display:none; position:absolute; width:250px; height:300px; margin:10px auto; background:#fff; z-index:2000;
left:0; right:0; top:0; bottom:0; padding:5px; border:1px solid #666;}

/*Закрыть*/
.close {cursor:pointer; position:absolute; top:0px; right:5px; padding:5px; color:#f00;}

/*НЕ важное оформление ссылки вызова окна*/
p {margin:800px 0 100px; text-align:center;}
.link-gen {display:inline-block; border:1px solid #f00; padding:2px 10px; cursor:pointer; background-color:#ffb6c1;}

И так создаем JavaScript-файл - my.js

$(document).ready(function() {

/*Показать ОКНО*/
$('.link-gen').click(function(){poka2('#wrap-gen',0); pokaz('.window',400);});
/*Скрыть ОКНО по фону по close*/
$('#wrap-gen, .close').click(function(){skryt('#wrap-gen',0); skryt('.window',200);});

/*ф-ия Скрыть*/
function skryt(id,sp) {$(id).hide(sp);}
/*ф-ия показ*/
function pokaz(id,sp) {$(id).css({'top':$(window).scrollTop()}).show(sp);} /*Окно*/
function poka2(id,sp) {$(id).show(sp);} /*Фон*/

});

Скачать modal-window-js.rar архив примера можно здесь.

Автор: Алехин Геннадий (14.04.2018)

Добавить комментарий


Защитный код
Обновить

Ошибки в тексте выделить и Ctrl+Enter


Расскажи о нас друзьям

Web-технологии

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

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

Необходимо создать три файла или скачть modal-window-js.rar архив примера.

И так создаем HTML-файл - index.html

Подробнее...

Красивое увеличение картинки при наведении

Красивое увеличение картинки при наведении

Нужно подготовить три файла ккартинку, HTML-файл и CSS-файл.

Создаем HTML-файл index.html с кодом:

Подробнее...
Интересные статьи

Женщины о себе...

Женщина о себе - женский юмор

1. Женщина сказала - Женщина сделала! Если Женщина сказала и не сделала, значит, Женщина по-шу-ти-ла.

2. Умная девушка всегда знает, когда включить дуру.

3. Я вся такая легкая, такая воздушная, такая неземная, такая смелая, неотразимая... Короче, пьяная я сегодня!

4. Женская логика: "Лучше по-хорошему скажи, иначе я сама додумаю, хуже будет!"

5. Счастье - это когда ты ходишь в его футболке, без косметики, с нелепым хвостиком на голове и для него ты самая красивая на Земле!

6. Решила по дому мужскую работу сделать сама, легла на диван, смотрю телевизор. Тяжело, не спорю, но надо...

7. Тридцать - это те же двадцать, только более ухоженная, самостоятельная и уверенная в себе!

Подробнее...

Создание и SEO продвижения сайта в интернете

Бюджет создания сайта определяется индивидуально и составляем ~30т.р. (+или-). Срок выполнения 2-4 недели, всё зависит от сложности сайта и взаимодействия с клиентом. Обычно бывают задержки со стороны клиентов.

Верстка сайта производится сразу в двух вариантах:

  • Для обычных компьютеров (лэптопов)
  • Для мобильны устройств (планшетов, смартфонов)
Подробнее...

Статистика женщин и мужчин на 2016г.

Статистика женщин и мужчин на 2016г.

Все мы, конечно, слышали весёлую и популярную когда-то песенку про то, что "...на десять девчонок по статистике девять ребят..." и, что женщин больше, а мужчин не хватает.

А вот, как реально обстоят дела по официальной статистике за 2016 год, взятой с официального сайта www.gks.ru - Федеральная служба государственной статистики.

И так: таблица 1.2. Женщины и мужчины по возрастным группам

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить