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-технологии

Подключение к MySQL в PHP

Примеры кода:

    
    //Это данные для подключения к MySQL
    $host='localhost'; // адрес сервера 
    $user='root';      // Login
    $pass='';          // Пароль
    $base='sasha';     // Имя базы данных<>

    echo '<h2>У вас PHP '.phpversion()."версия</h2>\n";
Подробнее...

Интерфейсы и трейты в PHP

Интерфейсы в ООП PHP

Интерфейсы (interface) - это класс, в котором все методы являются абстрактными (abstract) и открытыми (public). В интерфейсе ООП PHP можно задать задать только имена методов и их параметры, а реализованы они обязаны быть в расширяемых ими классах.

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

Трейты в ООП PHP

Трейты (trait) - это механизм обеспечения повторного использования кода в PHP с учетом одиночного наследования. Трейт отчасти реализует множественное наследование, позволяя разработчику повторно использовать наборы методов свободно, в нескольких независимых классах.

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

Код примера:

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

Шаблоны проектирования в PHP - паттерны

Шаблон проектирования или паттерн (англ. design pattern) - оптимальный и оригинальный подход в решении типичных, частовстречающихся задач. Эти подходы, приёмы имеют свои названия и используются почти во всех объектно-ориентированных языках программирования.

Паттерны можно классифицировать по назначению (цель, результат) и по тому, к чему обычно применяется к объектам или к классам.

  • Поведенческие (behavioral)
    • цепочка обязанностей (Chain of Responsibility);
    • команда (Command);
    • итератор (Iterator);
    • посредник (Mediator);
    • хранитель (Memento);
    • наблюдатель (Observer);
    • посетитель (Visitor);
    • стратегия (Strategy);
    • состояние (State);
    • шаблонный метод (Template Method).
  • Порождающие (creational)
    • простая фабрика (Simple Factory);
    • фабричный метод (Factory Method);
    • абстрактная фабрика (Abstract Factory);
    • строитель (Builder);
    • прототип (Prototype);
    • одиночка (Singleton).
  • Структурные (structural)
    • адаптер (Adapter);
    • мост (Bridge);
    • компоновщик (Composite);
    • декоратор (Decorator);
    • фасад (Facade);
    • приспособленец (Flyweight);
    • заместитель (Proxy).
Подробнее...
Интересные статьи

Стишки-депрессяшки

Стишки-депрессяшки

У меня нет попы

у меня нет тить

я должна работать

чтобы как то жить

©

В камасутре много

интересных поз

жаль у нас с женою

остеохондроз

©

Надо же приснится

всякая херня

прямо на работе

среди бела дня

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

Почему или резонные вопросы

Почему или резонные вопросы

Хотель бы получить ответы на такие вопросы:

  1. Почему современные технологии одновременно позволяют производить банки для пива, которые не разлагаются на свалке за 100 лет, и кузова автомобилей, которые гниют за 3-4 года?
  2. Почему лимонный сок сделан из концентрата, а средство для мытья посуды – из настоящего лимона?
  3. Почему белая нитка, которой соединены новые носки, всегда оказывается прочнее, чем нитки, из которых сделаны сами носки?
Подробнее...

Детские загадки для взрослых

murzilka m

*Загадки, которые были опубликованы в журнале "Мурзилка" 30 лет назад!!! Сегодня они не для детей точно: ))*

1. Чтобы спереди погладить, нужно сзади полизать. (Почтовая марка)

2. Кругом волоса, посредине колбаса. (Кукуруза)

3. Сверху черно внутри красно, как засунешь так прекрасно. (Галоши)

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

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

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